React Native与Android原生通信交互详情

尊重版权,未经授权不得转载

本文来自Songlcy投稿:文章地址:http://blog.csdn.net/u013718120/article/details/55506238

本篇博客是React Native中和Android原生交互通信详情文章

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：

源码以上传到github，希望大家star，follow支持哦~

https://github.com/songxiaoliang/ReactNativeApp

刚创建的React Native交流九群:536404410,欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

尊重原创，转载请注明：From Sky丶清（http://www.lcode.org） 侵权必究！

关注我的订阅号(codedev123),每天推送分享移动开发技术(Android/iOS),React Native技术文章,项目管理,程序猿日常点滴以及精品技术资讯文章(欢迎关注,精彩第一时间推送)。

关注我的微博，可以获得更多精彩内容

0

优秀人才不缺工作机会，只缺适合自己的好机会。但是他们往往没有精力从海量机会中找到最适合的那个。100offer 会对平台上的人才和企业进行严格筛选，让「最好的人才」和「最好的公司」相遇。注册 100offer，谈谈你对下一份工作的期待。一周内，收到 5-10 个满足你要求的好机会！点击了解...