React Native单选，多选

多选.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
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。