Функция радио с помощью 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 /> ); } }