RN 使用Radio实现单选

这个单选功能使用的是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实现单选
    private showFlatList() {
        let dataList = this.state.data
        if (dataList && dataList.length) {
            const extraUniqueKey = () => Math.random().toString();
            const renderAssertItem = (render: ListRenderItemInfo<any>) => {
                return (
                    <View>
                        <RadioItem
                            checked={this.state.selIndex === render.index}
                            onChange={(event: any) => {
                                // 如果选中则更新数据
                                if (event.target.checked) {
                                    this.setState({ selIndex: render.index });
                                    this.state.bidDocId = render.item.bidDocId
                                }
                            }}
                        >
                            <View style={{ marginVertical: 15 }}>
                                <SelBidderView
                                    bidderHeadImg={render.item.iconUrl}
                                    bidderName={render.item.userName}
                                />
                            </View>

                        </RadioItem>

                    </View>

                )
            }

            return (

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

                    keyExtractor={extraUniqueKey}
                />


            );
        }
    }

 

转载于:https://www.cnblogs.com/lijianyi/p/11481772.html