博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
React Native 自定义组件
阅读量:5818 次
发布时间:2019-06-18

本文共 661 字,大约阅读时间需要 2 分钟。

先说说自定义组件的作用及重要性。自定义组件就像原生开发里的自定义控件,通常具有可复用性,可移植性。本文将介绍一个最简单的自定义组件:自定义单选框CheckBox,类似效果图:

要写类似的一个控件先整理一下思路,为了让租件具有一定的可移植性,我们要给它暴漏一些属性,比如:

text: 设置选项文字;textStyle: 设置选项文字的样式,属性类型为object;textAtBehind:设置选项文字在前还是选择框在前;checked:设置是否被选择;onClick:设置点击事件。当然还需要给这些属性设置默认值:

接下来,就是最重要的Render方法了:在render里要根据checked来判定放哪张图片(选中还是未选中的图片);还有根据textAtBehind来判定是选项文字在前还是在后;整个组件是可点击的而且点击之后要反选,那么最外层用TouchableHighlight,这里还需要把他的onPress点击事件暴露出去,所以写成:onPress = {this.onClick}。onClick()代码如下:

整个Render方法就变得很简单了,只需要return一个TouchableHighlight即可。

如果你在用户注册界面需要一个用户选择性别的控件,那么,首先 require 它:

然后添加state来获取选中状态:

只需要用两个CheckBox即可,但是由于性别是单选题,所以需要用户做一下控制,当male为YES就把female设为NO:

上面只是一个思路,源代码代码:。希望对你有所帮助吧~

转载地址:http://uzzdx.baihongyu.com/

你可能感兴趣的文章
java获取kafka主题列表
查看>>
人生没有Ctrl+Z,没有Esc
查看>>
python 2.7 利用smtplib发送、抄送邮件以及发送html表格
查看>>
nginx负载均衡学习
查看>>
我的友情链接
查看>>
社区企业操作系统 CentOS 5.X 相关资源
查看>>
我的友情链接
查看>>
CentOS6.3 yum安装firefox的flash插件
查看>>
QrenCode 命令行下生成二维码
查看>>
linux下mysql Select查询命令及视图
查看>>
windows 修改管理员密码
查看>>
apache工作模式:prefork和worker
查看>>
angular-cli版本升级后错误
查看>>
Android 调试资料相关总结
查看>>
《数据结构与算法分析——c语言描述》读后笔记 5
查看>>
我的友情链接
查看>>
Web安全漏洞被动扫描工具—Watcher v1.5.6(Fiddler插件)
查看>>
do not hope log was re-writen during ATC running?
查看>>
CDN的工作原理以及其中的一些技术-阿里
查看>>
仿网易新闻一个按钮
查看>>