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的数据。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值