RN7_實(shí)戰(zhàn)（2）

React Native Android原生模塊引入

參考：

1、 http://www.devio.org/2017/01/22/React-Native-Android%E5%8E%9F%E7%94%9F%E6%A8%A1%E5%9D%97%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98-%E6%95%99%E7%A8%8B-%E5%BF%83%E5%BE%97/

2、 http://reactnative.cn/docs/0.41/native-modules-android.html#content

3、 http://www.liuchungui.com/blog/2016/05/08/reactnativezhi-yuan-sheng-mo-kuai-kai-fa-bing-fa-bu-androidpian/

構(gòu)建React Native Android原生模塊的三步驟：

1.       編寫原生模塊的相關(guān)java代碼；

2.       暴露接口與數(shù)據(jù)交互；

3.       注冊(cè)與導(dǎo)出ReactNative原生模塊；

編寫原生模塊的相關(guān)Java代碼

首先我們用AndroidStudio打開React Native項(xiàng)目根目錄下的android目錄。

（在用AS打開的時(shí)候別用別的編譯器打開這個(gè)項(xiàng)目。因?yàn)锳S在更新gradle或者其他東西的時(shí)候要?jiǎng)h除文件導(dǎo)致刪除不了）

暴露接口與數(shù)據(jù)交互；

1、為了能讓我們的原生方法讓RN知道，我們需要在AS中建立一個(gè)ReactContextBaseJavaModule類，這個(gè)類專門負(fù)責(zé)告訴RN原生有什么方法可用。

2、最后將上面的這個(gè)類暴露出來：

注冊(cè)與導(dǎo)出React Native原生模塊

結(jié)果：

原生的項(xiàng)目結(jié)構(gòu)：

線程的使用

在ReactNative中，JS模塊運(yùn)行在一個(gè)獨(dú)立的線程中。在我們?yōu)镽eact Native開發(fā)原生模塊的時(shí)候，如果有耗時(shí)的操作比如：文件讀寫、網(wǎng)絡(luò)操作等，我們需要新開辟一個(gè)線程，不然的話，這些耗時(shí)的操作會(huì)阻塞JS線程。在Android中我們可以借助AsyncTask來實(shí)現(xiàn)多線程。

React Native原生模塊向JS傳遞數(shù)據(jù)

參考：http://www.devio.org/2016/09/29/React-Native%E5%8E%9F%E7%94%9F%E6%A8%A1%E5%9D%97%E5%90%91JS%E4%BC%A0%E9%80%92%E6%95%B0%E6%8D%AE%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E5%BC%8F/

通過Callbacks的方式

原生內(nèi)代碼

Js模塊中代碼

通過PRomises的方式

原生內(nèi)代碼；

JS模塊中代碼

方式1：同步形式

通過ES7的新特性async/await來修飾了test方法，來以同步方式調(diào)用原生模塊的measureLayout方法。

代碼2：普通形式

通過發(fā)送事件的方式

原生內(nèi)代碼

通過RCTDeviceEventEmitter，來向JS傳遞事件。

JS模塊中代碼

JS中通過DeviceEventEmitter注冊(cè)監(jiān)聽了名為“onScanningResult”的事件，當(dāng)原生模塊發(fā)出名為“onScanningResult”的事件后，綁定在該事件上的onScanningResult = (e)會(huì)被回調(diào)。 然后通過e.result就可獲得事件所攜帶的數(shù)據(jù)。

三種方式對(duì)比