先说说自定义组件的作用及重要性。自定义组件就像原生开发里的自定义控件,通常具有可复用性,可移植性。本文将介绍一个最简单的自定义组件:自定义单选框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:
上面只是一个思路,源代码代码:在这里。希望对你有所帮助吧~