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：

上面只是一個思路，源代碼代碼：在這裏。但願對你有所幫助吧~