React Native 自定义单选功能

项目中我们经常会遇到单选的功能，有很多第三方库也有类似功能，譬如Ant Design Mobile RN库中的Radio，

但是这些样式是固定的，当我们需要自定义单选图标，完全自定义时，就需要我们自己实现了。

下面简述下自定义单选的功能，

本质是为每条数据绑定一个选中标记sel，然后通过该标记来实现单选

效果如图：

 

话不多说，直接上代码

state = {
        suggestlist: [{ sel: true, title: '单选1' }, { sel: false, title: '单选2' }, { sel: false, title: '单选3' }, { sel: false, title: '单选4' }],
    };

    render() {
        return (
            <View style={style.item_bg}>

                <Text style={style.item_title}>单选列表</Text>
                {/* 单选列表 */}
                {this.radiolist()}

            </View>
        );
    }

    private radiolist() {
        return this.state.suggestlist.map((item, index) => {
            return (
                <TouchableOpacity onPress={() => {
                    this.click(index)
                }} key={index}>
                    <ComponentSuggestItemView
                        item={item}
                    />
                </TouchableOpacity>
            )
        })
    }

    public click(index: number) {
        this.state.suggestlist.forEach((item, position) => {
            if (index == position) {
                item.sel = true;
            } else {
                item.sel = false;
            }
        });

        this.setState({
            suggestlist: this.state.suggestlist
        });

    }

单选组件 ComponentSuggestItemView

render() {
        return (
            <View style={style.item_top_btn}>
                {this.showImg()}
                <Text style={style.item_top_right_title}>{this.props.item.title}</Text>   
            </View>
        );
    }

    private showImg() {
        if (this.props.item.sel) {
            return (
                <Image source={require('../../../image/icon_check.png')} />
            );
        }
        return (
            <Image source={require('../../../image/icon_uncheck.png')} />
        );
    }