React Native 与 Android 通信
Christy4166
7年前
<p>本篇内容同样和React Native 与 原生App有关，可以说更加深入了两者之间的感情，为培养下一代做出准备：React Native与原生App的通信交互。</p> <p>Android系统为我们提供了webview来加载网页，同样为了让webview加载的网页可以与App交互，同样提供了一套机制帮助我们更方便的实现通信。为了实现React Native与原生App之间的通信，FB也实现了自己的一套交互机制。</p> <p>（1） RCTDeviceEventEmitter 事件方式</p> <p>（2） Callback 回调方式</p> <p>（3） Promise</p> <p>三种方式各具不同优缺点</p> <p>1.RCTDeviceEventEmitter</p> <p>优点：可任意时刻传递，Native主导控制。</p> <p>2.Callback</p> <p>优点：JS调用，Native返回。</p> <p>缺点：CallBack为异步操作，返回时机不确定</p> <p>3.Promise</p> <p>优点：JS调用，Native返回。</p> <p>缺点：每次使用需要JS调用一次</p> <p>了解了三者的通信方式，怎么能少了代码的描述！我们来看看代码如何实现。大致的实现步骤如下：</p> <p>（1）定义Module类，继承 ReactContextBaseJavaModule</p> <p>在Module类中，我们定义交互的方法，例如RN调用Native的方法，Native调用RN的方法等。</p> <p>（2）定义Package类，继承 ReactPackage</p> <p>实现Package的 createNativeModules 方法，将Module实例添加到集合。</p> <p>（3）定义Application，继承ReactApplication</p> <p>实现 getPackages方法 ， 将Package实例添加到 getPackages 下的集合。</p> <p>1.Module类中的核心代码</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/d43fbc52e98fc9ad1dda6cf50ca34423.png"></p> <p>名称可以自定义，对接时协商好即可。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/09a64509fd0e022e206fbbaca2168910.png"></p> <p>在module中定义一个方法，并用@ReactMethod 注解标注：表明该方法会被RN调用。即被RN调用的原生方法必须使用@ReactMethod注解标注。</p> <p>注意： RN层调用Native层进行界面跳转时，需要设置FLAG_ACTIVITY_NEW_TASK标志 ，否则会出现如下错误：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/db929cb307f0eaeb52518dbaff55add1.png"></p> <p>上面代码定义了原生方法，通过在Android层调用RN层。使用ReactContext的getJSModule方法，emit来发送消息。同样，emit的第一个参数要与RN层中addListener方法的第一个参数相同。</p> <p>2.自定义Package的核心代码</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/5297d16cb6da0a6faf6f356f56e77482.png"></p> <p>在createNativeModules方法中，初始化集合，并将module实例添加进集合，返回集合实例。</p> <p>3.Application核心代码</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/fe0e82af28b32f6e52c1b6c1fb7da5cc.png"></p> <p>在getPackages方法中，将Package实例添加到Arrays中即可完成注册。</p> <p>以上就是Android层核心代码配置，继续来看React Native层核心代码：</p> <p>1.调用原生代码</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/163552ba869b1aaad46ed13d9d9dd3b6.png"></p> <p>在React Native层，通过NativeModules调用commModule，继而调用原生方法即可。 注意：commModule要与Module类的getNames方法返回的名称对应。</p> <p>2. 接收原生调用</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/22e03e7cd23cb10331ac98554818466d.png"></p> <p>通过DeviceEventEmitter注册监听，类似于Android中的监听事件。第一个参数标识名称，要与Module中emit的Event Name相同。第二个参数即为处理回掉。</p> <p>3.界面代码</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/9f6a2697a0a033b9ed18c91c506ed90a.png"></p> <p>在Text中注册单击事件，RN层调用原生代码，跳转到拨号界面。</p> <p>4.Android层调用RN的代码</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/5b688299d5c9c0d2087191e382a3e854.png"></p> <p>调用Module中定义的nativeCallRn方法，继而出发RN层代码。以上就是通过 RCTDeviceEventEmitter 模式进行通信交互。可以很清晰的看出，交互都是以主动方式为主。</p> <p>RN中剩下的两种通信方式，存在一个共同的特点：</p> <p>从RN层调用Native层，Native层处理完成后，回调RN层</p> <p>直接看代码实现：</p> <p>（1）Callback</p> <p>同样还是在Module类中定义交互方法：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/01c4f662c74c39170807c0ebe5c1c25c.png"></p> <p>RN中定义回调：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/dab1d483cfa3e0732a6fb53b1caeefda.png"></p> <p>（2）Promise</p> <p>Module类中定义交互方法：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/54046fb947bffd853d7b51b0134f1ae1.png"></p> <p>RN中定义回调：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/1e18932c66fd5997cb3462ee02416469.png"></p> <p>布局中触发单击事件：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/f33915a1872ae16def5c8dd793ca13a9.png"></p> <p>最终效果：</p> <p>Android调用React Native：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/ed450978aebc64a10b787ecbd051d511.gif"></p> <p>React Native调用Android：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/274839943d189c4b3e792962cdcebbdd.gif"></p> <p> </p> <p> </p> <p>来自：http://blog.csdn.net/u013718120/article/details/55506238</p> <p> </p>