RN radio functions to achieve

The radio function using the Ant Design Mobile RN library Radio implemented directly on the code word does not speak

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

2, the statement const RadioItem = Radio.RadioItem;

3, state of

= State { 
        bidDocId: 0, // check data 
        selIndex: 0, // select index 
    };

4, using the map to achieve

//  使用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 the selected update data 
                            IF (event.target.checked) {
                                 the this .setState ({selIndex: index});
                                 the this .state.bidDocId = item.bidDocId 
                            } 
                        }}
                     > 
                        { / * custom * / }
                         < style = {{Flex View:. 1, paddingVertical: 15, flexDirection: 'Row'}}> 
                            < SelBidderView 
                                bidderHeadImg = {} item.iconUrl 
                                bidderName ={item.userName}
                            />
                        </View>
                    </RadioItem>
                );
            })
        }

    }

5. implemented using radio FlatList

//   Use FlatList implemented a radio tag for each data binding (checkedflag) and then update the value of the CPC similar native implementation of multiple-choice 
    Private showFlatList () { 
        the let dataList = the this .state.data
         IF (dataList && dataList. length) { 
            const extraUniqueKey = () => Math.random () toString ();. 
            const renderAssertItem = (the render: IBaseRenderItem <the any>) => {
                 return (
                     <View> 
                        < RadioItem 
                            the checked = {} render.item.checkedflag 
                            the onChange = {(Event: the 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 Binding 
                    Data = {dataList}
                     // list display control 
                    renderItem = {} renderAssertItem 
                    keyExtractor = { } extraUniqueKey
                 />
 
            ); 
        } 
    }