|
转载:React-Native 与原生的3种交互通信（Android）
React Native 进阶之原生混合与数据通信开发详解-适配iOS开发(61)
在为前端书写模块部分，不可避免的要接触核心的通信部分。
大致分为2种情况：
-
Android主动向JS端传递事件、数据
-
JS端被动向Android询问获取事件、数据
| 方式 |
优点 |
缺点 |
| 事件方式：RCTDeviceEventEmitter |
可任意时刻传递，Native主导控制 |
个人觉得此种方式缺点小 |
| CallBack回调方式 |
JS调用一次，Native返回一次 |
CallBack为异步操作，返回时机不确定 |
| Promises 方式 |
每次使用需要JS调用一次 |
效果图：
①：Android向JS传递事件
采用RCTDeviceEventEmitter：
在Native模块：
- 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
@ReactMethod
public void getTime() {
new Thread(new Runnable() {
@Override
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 传惨 */
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端接受：
1
2
3
4
5
6
7
componentWillMount() {
DeviceEventEmitter.addListener('EventName',function (msg) {
console.log(msg);
ToastAndroid.show("DeviceEventEmitter收到消息:" + "n" + msg.key,ToastAndroid.SHORT)
});
}
在componentWillMount进行监听事件获取传递的事件信息。
②：JS被动向Android询问事件、信息
Native部分：
1
2
3
4
void callBackTime(String name,Callback callback){
callback.invoke(getTimeMillis());
}
CallBack对应的就是JS中的function,JS调用Native模块处理完毕以后将时间回调给JS端。
JS端发送：
1
2
3
4
5
6
7
8
9
10
getCallBackTime() {
NativeModules.TransMissonMoudle.callBackTime("Allure",(msg) => {
console.log(msg)
ToastAndroid.show("CallBack收到消息:"+msg,ToastAndroid.SHORT)
}
)
}
向Native发送了一个名字Allure,在第二个参数接收回调结果。
Callback通俗简单易懂。
promise在js中很常见，而android也有类似的就是RxJava.可以通过链式将复杂代码结构转换为简短易读的代码。
由于promise不确定成功与失败，需要同步状态。 一般会调用then接口。
Native端：
1
2
3
4
5
6
7
8
void sendPromiseTime(String name,Promise promise) {
WritableMap writableMap=new WritableNativeMap();
writableMap.putString("age",0); box-sizing: border-box;">"20");
writableMap.putString("time",getTimeMillis());
promise.resolve(writableMap);
}
在此方法，接受了一个JS端传来的name，并且回传给JS端了一个字典，并存储了age和time两个字段。 需要注意的是使用Promise时，Promise参数需要放在最后一个参数里，否则JS接搜不到消息。
JS端：
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
getPromiseTime() {
NativeModules.sendPromiseTime("Allure").then(msg=> {
console.log("年龄:" + msg.age + "/n" + "时间:" + msg.time)
ToastAndroid"Promise收到消息:" + "n" + .time,68); box-sizing: border-box;">.SHORT)
this.setState({
age: msg.age,time: msg.catch(error=> {
console.log(error)
})
}
JS端通过then接口来获取Promise的数据。
至此，JS与Native的三种通信方式就此结束，不知道各位是否读懂了呢？ 若有疑问可以留言私信均可。
源码下载
注意在项目主目录先npm install。 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
