React-Native 与原生的3种交互通信（Android）

前言

最近到新公司，采用React-Native开发App。在某些性能方面有问题或者模块特殊的开发情况，不可避免的需要我们原生开发（Android\IOS）给予前端开发支持。

在为前端书写模块部分，不可避免的要接触核心的通信部分。

大致分为2种情况：

• Android主动向JS端传递事件、数据

• JS端被动向Android询问获取事件、数据

方式	优点	缺点
事件方式：RCTDeviceEventEmitter	可任意时刻传递，Native主导控制	个人觉得此种方式缺点小
CallBack回调方式	JS调用一次，Native返回一次	CallBack为异步操作，返回时机不确定
Promises 方式	JS调用一次，Native返回一次	每次使用需要JS调用一次

效果图：

①：Android向JS传递事件

采用RCTDeviceEventEmitter：

在Native模块：

 //延迟0.1秒获取时间。
    @ReactMethod
    public void getTime() {
        new Thread(new Runnable() {
            @Override
            public void run() {
                try {
                    Thread.sleep(100);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }

                SimpleDateFormat formatDate = new SimpleDateFormat("yyyy年MM月dd日  HH:mm:ss");
                Date date = new Date(System.currentTimeMillis());   
                String time = formatDate.format(date);

                WritableMap writableMap = new WritableNativeMap();
                writableMap.putString("key", time);
                sendTransMisson(mReactContext, "EventName", writableMap);

            }
        }).start();
    }


    /**
     * @param reactContext
     * @param eventName    事件名
     * @param params       传惨
     */
    public void sendTransMisson(ReactContext reactContext, String eventName, @Nullable WritableMap params) {
        reactContext
                .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit(eventName, params);

    }

getTime()主要为JS端调用Native的方法，在内部调用
sendTransMisson进行事件发送。 sendTransMisso这个方法名可以任意取

你喜欢就好,内部参数eventName为事件名，params为传递的事件属性。
在JS端接受：

 componentWillMount() {
        DeviceEventEmitter.addListener('EventName', function  (msg) {
            console.log(msg);
            ToastAndroid.show("DeviceEventEmitter收到消息:" + "\n" + msg.key, ToastAndroid.SHORT)

        });
    }

在componentWillMount进行监听事件获取传递的事件信息。

②：JS被动向Android询问事件、信息

• CallBack回调接受：

Native部分：

@ReactMethod
    public void  callBackTime(String name,Callback callback){
        callback.invoke(getTimeMillis());
    }

CallBack对应的就是JS中的function,JS调用Native模块处理完毕以后将时间回调给JS端。

JS端发送：

 getCallBackTime() {
        NativeModules.TransMissonMoudle.callBackTime("Allure",
            (msg) => {
                console.log(msg);
                ToastAndroid.show("CallBack收到消息:"+msg,ToastAndroid.SHORT)

            }
        );

    }

向Native发送了一个名字Allure,在第二个参数接收回调结果。
Callback通俗简单易懂。

• Promise传递

promise在js中很常见，而android也有类似的就是RxJava.可以通过链式将复杂代码结构转换为简短易读的代码。

由于promise不确定成功与失败，需要同步状态。 一般会调用then接口。
Native端：

 @ReactMethod
    public void sendPromiseTime(String name, Promise promise) {
        WritableMap writableMap=new WritableNativeMap();
        writableMap.putString("age","20");
        writableMap.putString("time",getTimeMillis());
        promise.resolve(writableMap);

    }

在此方法，接受了一个JS端传来的name，并且回传给JS端了一个字典，并存储了age和time两个字段。 需要注意的是使用Promise时，Promise参数需要放在最后一个参数里，否则JS接搜不到消息。

JS端：

 getPromiseTime() {
        NativeModules.TransMissonMoudle.sendPromiseTime("Allure").then(msg=> {
            console.log("年龄:" + msg.age + "/n" + "时间:" + msg.time);
            ToastAndroid.show("Promise收到消息:" + "\n" + "年龄:" + msg.age + "时间:" + msg.time, ToastAndroid.SHORT)

            this.setState({
                age: msg.age,
                time: msg.time,
            })
        }).catch(error=> {
            console.log(error);
        });
    }

JS端通过then接口来获取Promise的数据。

至此，JS与Native的三种通信方式就此结束，不知道各位是否读懂了呢？ 若有疑问可以留言私信均可。

源码下载

注意在项目主目录先npm install。