首页 » React Native » React Native技术文章 » 正文

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技术文章,项目管理,程序猿日常点滴以及精品技术资讯文章(欢迎关注,精彩第一时间推送)。

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