React Native 自定义单选功能-白红宇的个人博客

React Native 自定义单选功能

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

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

项目中我们经常会遇到单选的功能，有很多第三方库也有类似功能，譬如Ant Design Mobile RN库中的Radio，

但是这些样式是固定的，当我们需要自定义单选图标，完全自定义时，就需要我们自己实现了。

下面简述下自定义单选的功能，

本质是为每条数据绑定一个选中标记sel，然后通过该标记来实现单选

效果如图：

话不多说，直接上代码

state = {        suggestlist: [{ sel: true, title: '单选1' }, { sel: false, title: '单选2' }, { sel: false, title: '单选3' }, { sel: false, title: '单选4' }],    };    render() {        return (            
                    
     
      单选列表
                     {/* 单选列表 */}                {this.radiolist()}            
            );    }    private radiolist() {        return this.state.suggestlist.map((item, index) => {            return (                
    
      {                    this.click(index)                }} key={index}>                    
                     
                )        })    }    public click(index: number) {        this.state.suggestlist.forEach((item, position) => {            if (index == position) {                item.sel = true;            } else {                item.sel = false;            }        });        this.setState({            suggestlist: this.state.suggestlist        });    }

单选组件 ComponentSuggestItemView

render() {        return (            
     
                      {this.showImg()}                
      
       {this.props.item.title}
                     
             );    }    private showImg() {        if (this.props.item.sel) {            return (                            );        }        return (                    );    }

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

上一篇：React Native 自定义动态标签

下一篇：React Native 杂货（透明色、行间距、字体加粗等）

发表评论

关于作者

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

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章