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：

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