前端之家收集整理的这篇文章主要介绍了
React native和原生之间的通信,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
RN中文网关于原生模块(Android)的介绍可以看到,RN前端与原生模块之
间通信,主要有三种方法:
1)使用回调函数Callback,它提供了一个函数来把返回值传回给JavaScript。
2)使用Promise来实现。
3)原生模块向JavaScript发送事件。
关于使用回调,这是最简单的一种通信,这里可以看看官网的实现,今天要讲的是滴三种由原生模块向JavaScript发送事件。
(1)首先,你需要定义一个发送事件的方法。如下所示:
- 这可以通过ReactContext来获得对应的引用,像这样:*/
- publicstaticvoidsendEvent(ReactContextreactContext,StringeventName,@NullableWritableMapparamss)
- {
- System.out.println("reactContext="+reactContext);
- reactContext
- .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
- .emit(eventName,paramss);
- }
其中方法名可以任意,但是参数不可改变。该方法可以放在你要复用的原生类中(即为原生类1)。
需要注意的是,由于版本问题,该函数中的参数reactContext有可能为null,此时会报NullPointException的错误。所以我们需要手动给reactContext赋值,见步骤2.
(2)我们在原生类1中,定义变量public static ReactContext MyContext;
然后在我们自定义的继承至ReactContextBaseJavaModule的类中给reactContext赋值。
如下所示:
copy
classMyModuleextendsReactContextBaseJavaModule{
privateBluetoothAdaptermBluetoothAdapter=null;
publicMyModule(ReactApplicationContextreactContext){
super(reactContext);
原生类1.MyContext=reactContext;
}
.......以下写被@ReactNative所标注的方法
............................
...................
}
此时,reactContext将不会是null。也就不会报错。
(3)在某个原生函数中向JavaScript发送事件。如下所示:
(4)在RN前端监听事件。首先导入DeviceEventEmitter,即import{ DeviceEventEmitter } from 'react-native'
然后使用componentWillMount建立监听。
代码如下: