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

写在前面:最近在学习RN时,了解互相通信的问题,RN提供了三种方式.另外自定义ReactContextBaseJavaModule其实也是可以的,但单纯调用某个方法相对使用麻烦,一般用于封装调用.

大致分为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);

    }
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

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)

        });
    }
 
 
1
2
3
4
5
6
7
 
 
1
2
3
4
5
6
7

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

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

• CallBack回调接受：

Native部分：

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

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

JS端发送：

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

            }
        );

    }
 
 
1
2
3
4
5
6
7
8
9
10
 
 
1
2
3
4
5
6
7
8
9
10

向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);

    }
 
 
1
2
3
4
5
6
7
8
 
 
1
2
3
4
5
6
7
8

在此方法，接受了一个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);
        });
    }
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13

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