React Native 自定义组件

先说说自定义组件的作用及重要性。自定义组件就像原生开发里的自定义控件,通常具有可复用性,可移植性。本文将介绍一个最简单的自定义组件:自定义单选框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:

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容