前言
上一篇文章介紹了使用callback的方式來(lái)進(jìn)行React native與Android之間的通信，本文將介紹第三種通信方式，即promise的方式。
Promise方式
看了上面的回調(diào)函數(shù)的使用，大家有沒(méi)有發(fā)現(xiàn)上面的寫(xiě)法還有有一些繁瑣的？OK ， 當(dāng)然原生模塊還可以支持使用Promise，這樣可以簡(jiǎn)化我們編寫(xiě)的代碼。如果大家搭配使用ES2016標(biāo)準(zhǔn)的async/await的語(yǔ)法使用會(huì)更加好。如果被橋接的原生方法的最后一個(gè)參數(shù)是一個(gè)Promise對(duì)象，那么該JS方法會(huì)返回一個(gè)Promise對(duì)象。下面我們使用Promise對(duì)象來(lái)進(jìn)行重構(gòu)之前的回調(diào)函數(shù)方法。我們來(lái)看一下代碼是怎么樣實(shí)現(xiàn)的。本文的代碼是基于上一篇文章中的項(xiàng)目代碼示例。
1、原生模塊中首先在MyModule類(lèi)中添加被Rn調(diào)用的方法，代碼如下：
@ReactMethod
public void callNativeByPromise(String msg, Promise promise){
Log.e("wfunny","called by promise");
// 1.處理業(yè)務(wù)邏輯...
String result = "處理結(jié)果：" + msg;
// 2.回調(diào)RN,即將處理結(jié)果返回給RN
promise.resolve(result);
}
2、React native端在index.android.js中添加調(diào)用原生的方法代碼，本例子是通過(guò)點(diǎn)擊文本觸發(fā)的，代碼如下：
render(){
return (
<View style = {myStyles.container}>
<Text style = {myStyles.welcome} onPress={this.callNative.bind(this)}>
當(dāng)你點(diǎn)我的時(shí)候會(huì)調(diào)用原生方法，原生方法延遲3s后會(huì)向前端發(fā)送事件。
前端一直在監(jiān)聽(tīng)該事件，如果收到，則給出alert提示! send 方式
</Text>
<Text style = {myStyles.welcome} onPress={this.callNativeByCallBack.bind(this,'callback send ok',null)}>
callback方式 交互方式！！！！
</Text>
<Text style = {myStyles.welcome} onPress={this.callNativePromise.bind(this,'promise send ok',null)}>
promise方式 交互方式！！！！
</Text>
<Text style = {myStyles.instructions}>
{this.state.content}
</Text>
</View>
);
}
callNativePromise(msg){
console.log("js called by promise");
NativeModules.MyModule.callNativeByPromise(msg).then(
(result) => {
this.setState({content:result});
}
).catch((error) =>{
console.log(error);
})
}
從以上代碼可以看出，React native 中通過(guò)callNativePromise 方法調(diào)用原生模塊中的callNativeByPromise方法，該方法最后一個(gè)參數(shù)有一個(gè)Promise對(duì)象，那么JS調(diào)用Native模塊的方法就會(huì)返回一個(gè)Promise對(duì)象，咱們用這個(gè)對(duì)象來(lái)將原生處理完畢以后的結(jié)果給JS端。
三種交互方式的比較
1、RCTDeviceEventEmitter發(fā)送事件方式
優(yōu)點(diǎn)：可任意時(shí)刻傳遞，Native主導(dǎo)控制。
缺點(diǎn)：要添加注冊(cè)監(jiān)聽(tīng)
2、Callback回調(diào)方式
優(yōu)點(diǎn)：JS調(diào)用一次，Native返回一次，
缺點(diǎn)：CallBack為異步操作，返回時(shí)機(jī)不確定
3、Promise方式
優(yōu)點(diǎn)：JS調(diào)用一次，Native返回一次
缺點(diǎn)：每次使用需要JS調(diào)用一次
至于使用哪種方式根據(jù)自己的業(yè)務(wù)需求來(lái)決定，個(gè)人覺(jué)得相對(duì)而言 發(fā)送事件的方式缺點(diǎn)相對(duì)小一些。
