RN 使用Radio实现单选-白红宇的个人博客

RN 使用Radio实现单选

发布日期：2022-04-05 00:52:11 浏览次数：3 分类：博客文章

本文共 1963 字，大约阅读时间需要 6 分钟。

这个单选功能使用的是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 (                    
    
      {                            // 如果选中则更新数据                            if (event.target.checked) {                                this.setState({ selIndex: index });                                this.state.bidDocId = item.bidDocId                            }                        }}                    >                        {/* 自定义控件 */}                        
                                 
                              
                         
                    );            })        }    }

5.使用FlatList实现单选

//  使用FlatList实现单选    private showFlatList() {        let dataList = this.state.data        if (dataList && dataList.length) {            const extraUniqueKey = () => Math.random().toString();            const renderAssertItem = (render: ListRenderItemInfo
    
     ) => {                return (                    
                             
      
        {                                // 如果选中则更新数据                                if (event.target.checked) {                                    this.setState({ selIndex: render.index });                                    this.state.bidDocId = render.item.bidDocId                                }                            }}                        >                            
                                       
                                    
                               
                          
                     )            }            return (                
                 );        }    }

转载地址：https://www.cnblogs.com/lijianyi/p/11481772.html 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：RN 侧滑删除功能实现

下一篇：RN 使用Checkbox实现多选

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章