在前两篇的内容中,和大家分享了Android原生集成RN,以及RN的增量热更新。关于详细的内容,点击如下具体了解:
Android App巧妙集成React Native最详教程
本篇内容同样和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下的集合。
首先来看Module类:
(1)RCTDeviceEventEmitter
原文链接:https://www.f2er.com/react/304820.html