react native 单选框

react native 单选框的实现
RadioView.js组件

export default class RadioView extends PureComponent {

    static propTypes = {};

    constructor(props) {
        super(props);
        this.state = {
            bgc: ColorLineRed,
        }
    }


    render() {

        let color = this.props.checked ? this.state.bgc : '#fff';

        return (
            <View style={{justifyContent: 'center', alignItems: 'center'}}>

                <TouchableOpacity
                    onPress={this.pressed.bind(this)}
                    style={{backgroundColor: color, width: 20, height: 20, borderRadius: 50, borderColor: '#d9d9d9', borderWidth: 1}}>
                </TouchableOpacity>
            </View>
        )
    }

    pressed() {
        let {id, onCheck} = this.props;
        onCheck(id);
    }
}

父组件调用使用

 <RadioView  id={1} onCheck={this.checkCallBack} radius={16}
             bgc={ColorLineRed} checked={this.state.flag === 1}/>
 <RadioView  id={2} onCheck={this.checkCallBack} radius={16}
             bgc={ColorLineRed} checked={this.state.flag === 2}/>

回调

checkCallBack = (id) => {
        this.setState({
            flag: id
        });
        if (id === 1) {
            alert('第一种')
        } else if (id === 2) {
            alert('第二种');
        }
    };

效果：

clipboard.png