前言

上一篇文章介紹了使用callback的方式來進行React native與Android之間的通信，本文將介紹第三種通信方式，即promise的方式。

Promise方式

看了上面的回調(diào)函數(shù)的使用，大家有沒有發(fā)現(xiàn)上面的寫法還有有一些繁瑣的？OK ， 當(dāng)然原生模塊還可以支持使用Promise，這樣可以簡化我們編寫的代碼。如果大家搭配使用ES2016標(biāo)準(zhǔn)的async/await的語法使用會更加好。如果被橋接的原生方法的最后一個參數(shù)是一個Promise對象，那么該JS方法會返回一個Promise對象。下面我們使用Promise對象來進行重構(gòu)之前的回調(diào)函數(shù)方法。我們來看一下代碼是怎么樣實現(xiàn)的。本文的代碼是基于上一篇文章中的項目代碼示例。

1、原生模塊中首先在MyModule類中添加被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)用原生的方法代碼，本例子是通過點擊文本觸發(fā)的，代碼如下：

render(){
    return (
      <View style = {myStyles.container}>
        <Text style = {myStyles.welcome} onPress={this.callNative.bind(this)}>
            當(dāng)你點我的時候會調(diào)用原生方法，原生方法延遲3s后會向前端發(fā)送事件。
            前端一直在監(jiān)聽該事件，如果收到，則給出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 中通過callNativePromise 方法調(diào)用原生模塊中的callNativeByPromise方法，該方法最后一個參數(shù)有一個Promise對象，那么JS調(diào)用Native模塊的方法就會返回一個Promise對象，咱們用這個對象來將原生處理完畢以后的結(jié)果給JS端。

三種交互方式的比較

1、RCTDeviceEventEmitter發(fā)送事件方式

優(yōu)點：可任意時刻傳遞，Native主導(dǎo)控制。
缺點：要添加注冊監(jiān)聽

2、Callback回調(diào)方式

優(yōu)點：JS調(diào)用一次，Native返回一次，
缺點：CallBack為異步操作，返回時機不確定

3、Promise方式

優(yōu)點：JS調(diào)用一次，Native返回一次
缺點：每次使用需要JS調(diào)用一次

至于使用哪種方式根據(jù)自己的業(yè)務(wù)需求來決定，個人覺得相對而言 發(fā)送事件的方式缺點相對小一些。

上一篇：React native 與Android原生交互方式(二)