React native和原生之间的通信

RN中文网关于原生模块（Android）的介绍可以看到，RN前端与原生模块之

间通信，主要有三种方法：

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

2）使用Promise来实现。

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

（1）首先，你需要定义一个发送事件的方法。如下所示：

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

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

（2）我们在原生类1中，定义变量public static ReactContext MyContext；

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

如下所示：

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

（3）在某个原生函数中向JavaScript发送事件。如下所示：

然后使用componentWillMount建立监听。

代码如下：

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

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

下边展示一个完整Demo，Demo功能如下：

（1）JavaScript端在监听一个事件。

（2）点击前端某行文字，调用原生方法。

（3）在原生方法中，延迟3s后向前端发送对应事件。

（4）前端接收到事件后，给出alert提示。

代码如下：

ManiActivity.Java

ManiApplication.java

MyModule.java

MyPackage.java

Test.java

前端index.android.js代码如下：

运行结果如下所示：

点击之前：

调用原生方法并且等待3s后：

再说一个值得注意的地方，一般我们在接收到原生模块主动发来的事件时，都会进行一些操作，如更新UI，而不仅仅是弹出alert 。

例如我们需要更新UI，代码如下：