摘要：
Render（）｛return（<；radio list<；｛/*radio list*/｝｛this.radio list（）｝<；索引）=>；ComponentSuggestItemViewitem={item}/>；位置）=>；}否则｛item.sel=false；｝无线电组件ComponentSuggestItemViewrender（）｛return（<；
项目中我们经常会遇到单选的功能，有很多第三方库也有类似功能，譬如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')} /> ); }