RN 单选功能实现

这个单选功能使用的是Ant Design Mobile RN库中的Radio实现的，话不多讲直接上代码

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

2、声明 const RadioItem = Radio.RadioItem;

3、state中

state = {
        bidDocId: 0, // 选中数据
        selIndex: 0, // 选中索引
    };

4、使用map实现

//  使用map实现单选
    private showMap() {
        let dataList: any[] = this.state.data
        if (dataList && dataList.length) {

            return dataList.map((item, index) => {
                return (
                    <RadioItem
                        key={index}
                        style={{ height: 70 }}
                        checked={this.state.selIndex === index}
                        onChange={(event: any) => {
                            // 如果选中则更新数据
                            if (event.target.checked) {
                                this.setState({ selIndex: index });
                                this.state.bidDocId = item.bidDocId
                            }
                        }}
                    >
                        {/* 自定义控件 */}
                        <View style={{ flex: 1, paddingVertical: 15, flexDirection: 'row' }}>
                            <SelBidderView
                                bidderHeadImg={item.iconUrl}
                                bidderName={item.userName}
                            />
                        </View>
                    </RadioItem>
                );
            })
        }

    }

5.使用FlatList实现单选

//  使用FlatList实现单选 为每条数据绑定一个标记（checkedflag）然后每次点击更新这个值 类似原生多选的实现
    private showFlatList() {
        let dataList = this.state.data
        if (dataList && dataList.length) {
            const extraUniqueKey = () => Math.random().toString();
            const renderAssertItem = (render: IBaseRenderItem<any>) => {
                return (
                    <View>
                        <RadioItem
                            checked={render.item.checkedflag}
                            onChange={(event: any) => {
                                if (event.target.checked) {

                                    let oData: any = this.state.data;

                                    let oNew: any[] = [];
                                    oData.map((fItem: any) => {
                                        if (render.item.userId === fItem.userId) {
                                            fItem.checkedflag = true;
                                            this.state.bidDocId = fItem.bidDocId
                                        }
                                        else {
                                            fItem.checkedflag = false;
                                        }

                                        oNew.push(fItem);
                                    });

                                    this.setState({ data: oNew });

                                }
                            }}
                        >
                            <View style={{ marginVertical: 15 }}>
                                <SelBidderView
                                    bidderHeadImg={render.item.iconUrl}
                                    bidderName={render.item.userName}
                                />
                            </View>

                        </RadioItem>

                    </View>

                )
            }

            return (

                <FlatList
                    //数据绑定
                    data={dataList}
                    //列表显示控件
                    renderItem={renderAssertItem}

                    keyExtractor={extraUniqueKey}
                />


            );
        }
    }