RN функции радио для достижения

Функция радио с помощью Ant Design Mobile RN библиотека Radio реализована непосредственно на кодовое слово не говорит

1, 引入 импорт {Радио} от '@ муравей-дизайн / реагировать родной';

2, оператор Const RadioItem = Radio.RadioItem;

3, состояние

= Состояние { 
        bidDocId: 0, // проверить данные 
        selIndex: 0, // выбрать индекс 
    };

4, используя карту, чтобы достичь

//   使用карта实现单选
    частный showMap () { 
        пусть DataList: любой [] = это .state.data
         если (DataList && dataList.length) { 

            вернуть dataList.map ((пункт, индекс) => {
                 возвращение (
                     < RadioItem 
                        ключ = {индекс} 
                        стиль = {{высота: 70 }} 
                        проверено = { это .state.selIndex === индекс} 
                        OnChange = {(событие: любой) => {
                            // Если выбранные данные обновления 
                            IF (event.target.checked) {
                                 это .setState ({selIndex: индекс});
                                 это .state.bidDocId = item.bidDocId 
                            } 
                        }}
                     > 
                        { / * заказ * / }
                         < стиль = {{Flex View :. 1, paddingVertical: 15, flexDirection: 'Строка'}}> 
                            < SelBidderView 
                                bidderHeadImg = {} item.iconUrl 
                                bidderName ={item.userName}
                             /> 
                        </ View> 
                    </ RadioItem>                 ); 
            }) 
        } 
    }

5. реализованы с использованием радио FlatList

//   Использование FlatList реализовал радио метки для каждых связывания данных (checkedflag) , а затем обновить значение КПК аналогичной нативную реализации нескольких вариантов 
    Private showFlatList () { 
        ЛПЭ DataList = это .state.data
         IF (DataList && DataList. длина) { 
            Const extraUniqueKey = () => Math.random () ToString () ;. 
            Const renderAssertItem = (рендеринг: IBaseRenderItem <любой>) => {
                 возвращение (
                     <Вид> 
                        < RadioItem 
                            проверенный = {} render.item.checkedflag 
                            OnChange = {(событие: любой) =>{
                                 Если (event.target.checked) { 

                                    пусть OData: любой = это .state.data; 

                                    пусть Onew: любой [] = []; 
                                    oData.map ((fItem: любой) => {
                                         если (render.item.userId === fItem.userId) { 
                                            fItem.checkedflag = истинно ;
                                             это .state.bidDocId = fItem.bidDocId 
                                        } 
                                        еще{ 
                                            FItem.checkedflag = ложь ; 
                                        } 

                                        ONew.push (fItem); 
                                    }); 

                                    это .setState ({данные: Onew}); 

                                } 
                            }}
                         > 
                            <Посмотреть стиль = {{marginVertical: 15}}> 
                                < SelBidderView 
                                    bidderHeadImg = {render.item.iconUrl} 
                                    bidderName =render.item.userName} {
                                 /> 
                            </ View> 

                        </ RadioItem> 

                    </ View> 
                ) 
            } возвращение ( < FlatList
                     // Привязка данных 
                    Data = {DataList}
                     // список управления отображением 
                    renderItem = {} renderAssertItem 
                    keyExtractor = { } extraUniqueKey
                 />
 
            ); 
        } 
    }


            

                

 

рекомендация

отwww.cnblogs.com/lijianyi/p/11481772.html
рекомендация