React Native 原生与JS之间事件绑定注册 作用在于原生可以直接调用JS的方法

1 前面我们已经说过了RN混合开发中,原生如何调用JS的各个页面 JS如何调用原生的activity,以及JS中如何调用原生的方法.
2 这些已经比较简单的,这一节主要说,我们如果在原生JAVA代码中,某个时刻非常想响应JS的某个方法怎么办.
目前,我还没有了解到如何可以直接调用JS的某个方法,我的做法是采用事件响应的方式,就跟Android原生的按钮绑定了某个事件一样,如果收到这个消息,JS端就去执行这个操作.下面具体说一下.

1 JAVA端注册事件

如何注册时间呢,

 public static void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap paramss)
    {

        if(reactContext!=null){
                  reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, paramss);
        }

    }

在这段代码里面,是一个发送到JS端事件的方法,其中reactContext这个context,是在ReactModule这个类中产生的.它继承ReactContextBaseJavaModule这个类.了解的话应该清楚,
我们可以在需要的类中,设置静态变量,然后在ReactModule这个类的构造方法中传递这个对象.

    public static ReactContext mReactContext;

eventName这个参数,是事件的名称.
paramss这个参数是事件的参数.

2 JAVA端发送消息

我们要想在JAVA端调用JS的方法,也就是通过消息来判断应该调用哪个方法,跟上节说的,调用JS的activity一样,JS只有一个activity,但是它有很多的页面,具体显示哪一个页面,可以通过我们传递的参数来区分.

WritableMap event = Arguments.createMap();
event.putString("type","abc");
sendEvent(mReactContext, "ABC",event);

前两行代码是设置参数,最后一个方法是发送数据.
下边我们来看一下JS端是如何接收和处理的.

3 JS端接收和处理

DeviceEventEmitter这是JS端设置注册事件,需要用到的组件.

import {
  AppRegistry,
  DeviceEventEmitter,
} from 'react-native';

看到这段代码,应该比较容易理解.我们在JS组件生命周期开始的部分,注册接收的事件.

    this.ABC = DeviceEventEmitter.addListener('ABC', function (e: Event) {
      if ('abc' == e.type) {
        that.setState({ ABC: true });
      }
    });

这段代码可以写在componentDidMount这个生命周期之中,addListener(‘ABC’, 这个地方的ABC与sendEvent(mReactContext, “ABC”,event);这里面的ABC是对应的.
if (‘abc’ == e.type) {这个地方的type和abc与event.putString(“type”,”abc”);这个里面的是对应的,相比这样就更加清楚了.
这样的话,当JAVA端发了消息,我在JS端就收到了,收到之后,想执行什么方法就是我的事了,这个需求就可以满足了.