RN中文网关于原生模块(Android)的介绍可以看到,RN前端与原生模块之

间通信,主要有三种方法:

1)使用回调函数Callback,它提供了一个函数来把返回值传回给JavaScript

2)使用Promise来实现。

3)原生模块向JavaScript发送事件。

关于使用回调,这是最简单的一种通信,这里可以看看官网的实现,今天要讲的是滴三种由原生模块向JavaScript发送事件。

(1)首先,你需要定义一个发送事件的方法。如下所示:

[java] view plain copy

  1. /*原生模块可以在没有被调用的情况下往JavaScript发送事件通知。
  2. 最简单的办法就是通过RCTDeviceEventEmitter,
  3. 这可以通过ReactContext来获得对应的引用,像这样:*/
  4. public static void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap paramss)
  5. {
  6. System.out.println("reactContext="+reactContext);
  7. reactContext
  8. .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
  9. .emit(eventName, paramss);
  10. }

其中方法名可以任意,但是参数不可改变。该方法可以放在你要复用的原生类中(即为原生类1)。

需要注意的是,由于版本问题,该函数中的参数reactContext有可能为null,此时会报NullPointException的错误。所以我们需要手动给reactContext赋值,见步骤2.

(2)我们在原生类1中,定义变量public static ReactContext  MyContext;

然后在我们自定义的继承至ReactContextBaseJavaModule的类中给reactContext赋值。

如下所示:

[java] view plain copy

  1. public class MyModule extends ReactContextBaseJavaModule {
  2. private BluetoothAdapter mBluetoothAdapter = null;
  3. public MyModule(ReactApplicationContext reactContext) {
  4. super(reactContext);
  5. 原生类1.MyContext=reactContext;
  6. }
  7. .......以下写被@ReactNative所标注的方法
  8. ............................
  9. ...................
  10. }

此时,reactContext将不会是null。也就不会报错。

(3)在某个原生函数中向JavaScript发送事件。如下所示:

[java] view plain copy

  1. WritableMap event = Arguments.createMap();
  2. sendEvent(MyContext, "EventName",event);

(4)在RN前端监听事件。首先导入DeviceEventEmitter,即import{ DeviceEventEmitter } from 'react-native'

然后使用componentWillMount建立监听。

代码如下:

[javascript] view plain copy

  1. componentWillMount(){
  2. DeviceEventEmitter.addListener('EventName', function() {
  3. alert("send success");
  4. });
  5. }

注意:该监听必须放在class里边,和render、const对齐。

);

  • } catch (InterruptedException e) {
  • e.printStackTrace();
  • }
  • //发送事件,事件名为EventName
  • WritableMap et= Arguments.createMap();
  • sendEvent(myContext,"EventName",et);
  • }
  • }).start();
  • }
  • }