React Native单选，多选

20170906150468611759afb0250585a.gif

1.renderShowEditView里面的2个图片自己替换一下
2.复制代码直接就可以跑

import React, {PureComponent} from 'react'import {View, Text, StyleSheet, ScrollView, TouchableOpacity, ListView, Image, Dimensions} from 'react-native'const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});let {width, height} = Dimensions.get('window');export default class CircleList extends PureComponent {    constructor(props) {        super(props);        this.state = {            isEdict: false,//是否编辑状态            selectArray: [],            dataSource: [{id: '1', title: '文章1'}, {id: '2', title: '文章2'}, {id: '3', title: '文章3'},],        }    }    componentDidMount() {        let array = this.state.dataSource;        let newArray = []        //服务器返回的数据,自己增加一个状态,控制是否选中        for (let i = 0; i < array.length; i++) {            let dict = array[i]            dict.isSelect = false;            newArray.push(dict);        }        this.setState({            dataSource: newArray        });    }    render() {        return (            <View style={{flex: 1}}>                <Text onPress={this.onEditOnPress} style={{color: 'black'}}>{'点我进入编辑/非编辑状态'}</Text>                <ListView                    renderRow={this.renderRow}                    dataSource={ds.cloneWithRows(this.state.dataSource)}/>                <View style={{justifyContent: 'center', alignItems: 'center'}}>                    <Text>{JSON.stringify(this.state.selectArray)}</Text>                </View>            </View>        );    }    renderRow = (rowData, sectionID, rowID, highlightRow) => {        return (            <View style={{height: 111, borderBottomColor: 'gray', borderBottomWidth: 1, flexDirection: 'row'}}>                {this.renderShowEditView(this.state.isEdict, rowData, rowID, ()=> {                    this.rightOnPress(rowData, rowID)                })}                <View style={{justifyContent: 'center', alignItems: 'center'}}>                    <Text>{rowData.title}</Text>                </View>            </View>        )    }    //是否进去编辑状态    onEditOnPress = ()=> {        this.setState({isEdict: !this.state.isEdict});    }    //左边按钮选择    rightOnPress = (rowData, index)=> {        let selectArray = this.state.selectArray;        let data = this.state.dataSource;        let newArray = []        for (let i = 0; i < data.length; i++) {            let dict = data[i];            if (index == i) {                if (dict.isSelect == true) {                    dict.isSelect = false                    for (let j = 0; j < selectArray.length; j++) {                        let id = selectArray[j];                        if (id == dict.id) {                            selectArray.splice(j, 1);                        }                    }                } else {                    dict.isSelect = true                    selectArray.push(dict.id);                }            }            newArray.push(dict);        }        this.setState({            selectArray: selectArray,            dataSource: newArray        });    }    //是否选中    renderShowEditView(isEdict, rowData, index, onPress) {        if (isEdict == true) {            let imageURL = require('../../res/img/circle/没选中.png')            if (rowData.isSelect == true) {                imageURL = require('../../res/img/circle/选中.png')            }            return (                <TouchableOpacity onPress={()=> {                    onPress(rowData, index)                }} style={{height: 111, width: 40, justifyContent: 'center', alignItems: 'center'}}>                    <Image style={{width: 30, height: 30}} source={imageURL}/>                </TouchableOpacity>            )        }    }}

作者：苹果雪梨渣
链接：http://www.jianshu.com/p/9c2c7c43897c
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

多选.gif

import React, {Component} from "react";import {Button, StyleSheet, Text, View, Image, TouchableOpacity} from "react-native";export default class RadioGroup extends Component {    constructor(props) {        super(props)        this.state = {            selectIndex: this.props.selectIndex ? this.props.selectIndex : '',            data: this.props.data ? this.props.data : [{title: '男',}, {title: '女'}],        };    }    render() {        let newArray = this.state.data;        return (            <View style={[this.props.style]}>                {                    newArray.map((item, index) =>                        this.renderRadioButton(newArray, item, this.onPress, index, this.state.selectIndex)                    )                }            </View>        )    }    onPress = (index, item)=> {        let array = this.state.data;        for (let i = 0; i < array.length; i++) {            let item = array[i];            item.select = false;            if (i == index) {                item.select = true;            }        }        this.setState({selectIndex: index});        this.props.onPress ? this.props.onPress(index, item) : ()=> {        }    }    renderRadioButton(array, item, onPress, index, sexIndex) {        let backgroundColor = 'red';        let image = item.image        if (item.select == true) {            image = item.image2;            backgroundColor = 'blue';        } else {            image = item.image;            backgroundColor = 'red';        }        if (sexIndex == index && sexIndex != '') {            backgroundColor = 'blue';            image = item.image2;        }        // let childViewWidth = item.childViewWidth ? item.childViewWidth : 100;        // let childViewHeight = item.childViewHeight ? item.childViewHeight : 44;        // let childViewbackgroundColor = item.childViewbackgroundColor ? item.childViewbackgroundColor : 'white';        //        //        // let imageWidth = item.imageWidth ? item.imageWidth : 20;        // let imageHeigt = item.imageHeigt ? item.imageHeigt : 20;        return (            <TouchableOpacity key={index} onPress={()=> {                onPress(index, item)            }} style={[{                width: 100,                height: 43,                flexDirection: 'row',                justifyContent: 'center',                alignItems: 'center',            },this.props.conTainStyle]}>                <Image style={[{width: 20, height: 20},this.props.imageStyle]} source={image}/>                <Text style={[{marginLeft: 15},this.props.textStyle]}>{item.title}</Text>            </TouchableOpacity>        )    }}const styles = StyleSheet.create({    contain: {        flex: 1,        backgroundColor: 'white',    }});

import React, {PureComponent} from 'react'import {View, Text, StyleSheet, ScrollView, TouchableOpacity, ListView, Image, Dimensions} from 'react-native'const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});let {width, height} = Dimensions.get('window');import RadioGroup  from './RadioGroup';export default class CircleList extends PureComponent {    constructor(props) {        super(props)        this.state = {            sexArray: [                {                    title: '男',                    image:  require('../../res/img/circle/没选中.png'),                    image2:require('../../res/img/circle/选中.png'),                },                {                    title: '女',                    image:  require('../../res/img/circle/没选中.png'),                    image2:require('../../res/img/circle/选中.png'),                }            ],        };    }    render() {        return (            <View style={{height: 44, flex: 1}}>                <RadioGroup                    style={{flexDirection: 'row'}}//整个组件的样式----这样可以垂直和水平                    conTainStyle={{height: 44, width: 60}}//图片和文字的容器样式                    imageStyle={{width: 25, height: 25}}//图片样式                    textStyle={{color: 'black'}}//文字样式                    selectIndex={''}//空字符串,表示不选中,数组索引表示默认选中                    data={this.state.sexArray}//数据源                    onPress={(index, item)=> {                        console.warn(index)                        console.warn(item.title)                    }}                />                <RadioGroup                    style={{flexDirection: 'column'}}//整个组件的样式----这样可以垂直和水平                    conTainStyle={{height: 44, width: 60}}//图片和文字的容器样式                    imageStyle={{width: 25, height: 25}}//图片样式                    textStyle={{color: 'black'}}//文字样式                    selectIndex={'1'}//空字符串,表示不选中,数组索引表示默认选中                    data={this.state.sexArray}//数据源                    onPress={(index, item)=> {                        console.warn(index)                        console.warn(item.title)                    }}                />            </View>        )    }}

作者：苹果雪梨渣
链接：http://www.jianshu.com/p/8ff37f2195c3
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。