RN 使用Radio实现多选

这个单选功能使用的是Ant Design Mobile RN库中的Radio实现的，效果如图

 

 

话不多说讲直接上代码

1、引入import { Radio} from '@ant-design/react-native';

2、声明 const RadioItem = Radio.RadioItem;

3、使用map实现

//  使用RadioItem实现多选 为每条数据绑定一个标记（checkedflag）然后每次点击更新这个值 类似原生多选的实现
    private showMapCheck() {
        let dataList: any[] = this.state.data
        if (dataList && dataList.length) {

            return dataList.map((item, index) => {
                return (
                    <RadioItem
                        key={index}
                        style={{ height: 70 }}
                        checked={item.checkedflag}
                        onChange={(event: any) => {

                            let oData: any = this.state.data;
                            let oNew: any[] = [];
                            oData.map((fItem: any) => {
                                // 将当前选中标记取反
                                if (item.userId === fItem.userId) {
                                    fItem.checkedflag = !fItem.checkedflag;
                                }
                                oNew.push(fItem);
                            });
                            this.setState({ data: oNew });
                        }}
                    >
                        {/* 自定义控件 */}
                        <View style={{ flex: 1, paddingVertical: 15, flexDirection: 'row' }}>
                            <SelBidderView
                                bidderHeadImg={item.iconUrl}
                                bidderName={item.userName}
                            />
                        </View>
                    </RadioItem>
                );
            })
        }

    }

4、调用时通过checkedflag标记取出选中元素

 let oData: any = this.state.data;
 let oNew: any = [];
 oData.map((fItem: any) => {
 if (fItem.checkedflag) {
    oNew.push(fItem.userId)
  }  

   });