React Native 與 Android 通信

本篇內容同樣和React Native 與 原生App有關，可以說更加深入了兩者之間的感情，為培養下一代做出準備：React Native與原生App的通信交互。

Android系統為我們提供了webview來加載網頁，同樣為了讓webview加載的網頁可以與App交互，同樣提供了一套機制幫助我們更方便的實現通信。為了實現React Native與原生App之間的通信，FB也實現了自己的一套交互機制。

（1） RCTDeviceEventEmitter 事件方式

（2） Callback 回調方式

（3） Promise

三種方式各具不同優缺點

1.RCTDeviceEventEmitter

優點：可任意時刻傳遞，Native主導控制。

2.Callback

優點：JS調用，Native返回。

缺點：CallBack為異步操作，返回時機不確定

3.Promise

優點：JS調用，Native返回。

缺點：每次使用需要JS調用一次

了解了三者的通信方式，怎么能少了代碼的描述！我們來看看代碼如何實現。大致的實現步驟如下：

（1）定義Module類，繼承 ReactContextBaseJavaModule

在Module類中，我們定義交互的方法，例如RN調用Native的方法，Native調用RN的方法等。

（2）定義Package類，繼承 ReactPackage

實現Package的 createNativeModules 方法，將Module實例添加到集合。

（3）定義Application，繼承ReactApplication

實現 getPackages方法 ， 將Package實例添加到 getPackages 下的集合。

1.Module類中的核心代碼

名稱可以自定義，對接時協商好即可。

在module中定義一個方法，并用@ReactMethod 注解標注：表明該方法會被RN調用。即被RN調用的原生方法必須使用@ReactMethod注解標注。

注意： RN層調用Native層進行界面跳轉時，需要設置FLAG_ACTIVITY_NEW_TASK標志 ，否則會出現如下錯誤：

上面代碼定義了原生方法，通過在Android層調用RN層。使用ReactContext的getJSModule方法，emit來發送消息。同樣，emit的第一個參數要與RN層中addListener方法的第一個參數相同。

2.自定義Package的核心代碼

在createNativeModules方法中，初始化集合，并將module實例添加進集合，返回集合實例。

3.Application核心代碼

在getPackages方法中，將Package實例添加到Arrays中即可完成注冊。

以上就是Android層核心代碼配置，繼續來看React Native層核心代碼：

1.調用原生代碼

在React Native層，通過NativeModules調用commModule，繼而調用原生方法即可。 注意：commModule要與Module類的getNames方法返回的名稱對應。

2. 接收原生調用

通過DeviceEventEmitter注冊監聽，類似于Android中的監聽事件。第一個參數標識名稱，要與Module中emit的Event Name相同。第二個參數即為處理回掉。

3.界面代碼

在Text中注冊單擊事件，RN層調用原生代碼，跳轉到撥號界面。

4.Android層調用RN的代碼

調用Module中定義的nativeCallRn方法，繼而出發RN層代碼。以上就是通過 RCTDeviceEventEmitter 模式進行通信交互。可以很清晰的看出，交互都是以主動方式為主。

RN中剩下的兩種通信方式，存在一個共同的特點：

從RN層調用Native層，Native層處理完成后，回調RN層

直接看代碼實現：

（1）Callback

同樣還是在Module類中定義交互方法：

RN中定義回調：

（2）Promise

Module類中定義交互方法：

RN中定義回調：

布局中觸發單擊事件：

最終效果：

Android調用React Native：

React Native調用Android：

 

 

來自：http://blog.csdn.net/u013718120/article/details/55506238