1、從Android到React Native開發(fā)（一、入門）
2、從Android到React Native開發(fā)（二、通信與模塊實(shí)現(xiàn)）
4、從Android到React Native開發(fā)（四、打包流程和發(fā)布為Maven庫(kù)）
恍惚間3個(gè)月過(guò)去了，作為揭棺而起的失蹤人口，遲來(lái)的第三篇，也是react native原生相關(guān)的最后的一篇，是時(shí)候給收個(gè)尾了。這次就不廢話了，直接上主題(￣^￣)ゞ。
react native的高效，在于其中大部分組件，都是基于原生封裝的，js中對(duì)組件的配置與操作，最終都會(huì)轉(zhuǎn)化為native控件行為。以上的這段廢話，總結(jié)起來(lái)就是：react native通過(guò)統(tǒng)一的接口封裝，把原生控件轉(zhuǎn)為js組件使用。
既然有官方封裝，那肯定少不了自定義控件。react native自定義組件還是很方便的，關(guān)鍵就在于ViewManager／ViewGroupManager。從類名上，很明顯是對(duì)應(yīng)原生中的View和ViewGroup。
*** (PS ：react native 中的View組件，封裝的其實(shí)是ViewGroupManager，所以View組件才可以包裹子組件，組件中的ZIndex屬性，其實(shí)就是子組件在add到ViewGroup中先后，如下圖) ***
其他的內(nèi)部細(xì)節(jié)就不深究咯，愉悅的奔向主題吧(?￣? ?? ￣??)。注意，下方代碼分析大部分來(lái)自以下路徑：
//js組件
node_modules/react-native/Libraries/Components/View
node_modules/react-native/Libraries/Components/WebView
//原生java
react-native-0.xx.x/com.facebook/react/views/view
react-native-0.xx.x/com.facebook/react/views/webview
1、繼承ViewGroupManager
首先我們需要實(shí)現(xiàn)一個(gè)XXXGroupManager，繼承于ViewGroupManager。其中最主要的便是重載實(shí)現(xiàn)getName和creatViewInstance兩個(gè)方法。
getName指定了XXXGroupManager在js組件中獲取的名稱。creatViewInstance創(chuàng)建了自定義控件在Manager中使用，這里只要將你在原生端的自定義控件，生成即可。
js組件中，使用requireNativeComponent，可以通過(guò)上面中g(shù)etName指定的名稱，獲取到對(duì)應(yīng)的控件，如下圖，通過(guò)獲取到的控件，就可以配置對(duì)應(yīng)的接口啦ε-(′?｀; )。
*** 關(guān)于requireNativeComponent的使用說(shuō)明參考下圖 ***
2、設(shè)置自定義控件屬性
react native 提供 @ReactProp 和 @ReactPropGroup 注解，為js組件提供接口，配置原生控件的屬性。如下圖1，name = "borderStyle" 表示，js組件可以通過(guò)borderStyle設(shè)置控件的borderStyle，如圖2。如果需要默認(rèn)值，可以增加default屬性。
這里需要注意，@ReactPropGroup是一組相近的屬性設(shè)置注解，如設(shè)置UI的上下左右的不同寬度，原生中通過(guò)index判斷，而它們?cè)趈s端組件的設(shè)置，可以統(tǒng)一到原生中的一個(gè)接口。
3、原生控件操作JS組件
react native提供原生控件對(duì)js組件的交互支持，和上一篇文章類似，也是通過(guò)事件機(jī)制發(fā)送，發(fā)送消息到j(luò)s組件中，js組件通過(guò)監(jiān)聽事件的callback處理消息。
首先，在 UIManagerModuleConstants.java 中，如圖4，react native默認(rèn)映射了一些組件的消息事件名，如topChange在js組件中通過(guò)onChange監(jiān)聽，這樣在原始中通過(guò)topChange發(fā)送的消息，就可以在組件中的onChange接收到消息。
消息中的參數(shù)，可以通過(guò)WritableMap傳遞數(shù)據(jù)，利用rctEventEmitter發(fā)送消息。
有時(shí)候，你可能還需要自定義自己的消息名，那么你需要重寫
getExportedCustomDirectEventTypeConstants ，只有注冊(cè)了你的映射消息關(guān)系，才可以在js組件中，正常接收到你自定的消息名的消息。
4、js組件操作原生控件
既然原生控件可以操作組件，那么js組件也有控制原生控件的需求。這時(shí)候我們可以重載 getCommandsMap ，用來(lái)注冊(cè)js組件支持的操作行為，通過(guò) receiveCommand 處理操作，如在js組件中調(diào)用reload，就會(huì)觸發(fā)原生XXXGroupManager中receiveCommand的root.reload，從而與原生控件交互。
圖9中，通過(guò)UIManager，發(fā)送命令到原生。
這類使用方式，類似的使用場(chǎng)景有，例如
//textInput組件中主動(dòng)獲取焦點(diǎn)
UIManager.dispatchViewManagerCommand(
ReactNative.findNodeHandle(this.textInput),
UIManager.AndroidTextInput.Commands.focusTextInput,
null);
5、js端組件實(shí)現(xiàn)
最終在原生端配置結(jié)束后，js端配置完對(duì)應(yīng)邏輯，通過(guò) module.exports = WebView 導(dǎo)出組件使用。
結(jié)言
拖了這么久，react native和andorid原生相關(guān)的文章終于收尾啦(???)，也算是對(duì)react native的一個(gè)里程碑吧。在實(shí)際開發(fā)中，react native的代碼的復(fù)用率還是挺高的，作為跨平臺(tái)開發(fā)的一種，還是蠻推薦大家嘗試下。
接下來(lái)有時(shí)間會(huì)把github的demo完善下，畢竟demo落下的有點(diǎn)多了，歡迎大家關(guān)注喲ε-(′?｀; )。
** 個(gè)人github入口：https://github.com/CarGuo **
** RN完整學(xué)習(xí)項(xiàng)目：https://github.com/CarGuo/GSYGithubAPP**
** RN學(xué)習(xí)項(xiàng)目：https://github.com/CarGuo/GSYGithubAPP**
