React nativeとAndroid原生インタラクティブ方式(二)

1982 ワード

前言
前の記事では、イベントを送信する方式でReact nativeとAndroidの間の通信を紹介していますが、もし知りたいなら、この記事を見てください.React nativeとAndroid元とのインタラクティブ方式を紹介します.ここでは、第二の通信方式、すなわちコールバック方式を紹介します.
Callback方式
原生モジュールには特別なパラメータがあります.それはコールバック関数です.ほとんどの場合、JavaScriptにフィードバック方法を提供します.具体的にはどのようにフィードバック方法を提供しますか?前の文章の中で原生モジュールをReact nativeの先端にパッケージングして呼び出しますか?呼び出された方法は@ReactMethodで注釈します.そうだ、ここも同じです.コードはどのように実現されているかを見てみます.本論文のコードは、前の記事の項目コードの例に基づいている.
1、元のモジュールではまずMyModuleクラスにRnで呼び出される方法を追加します.コードは以下の通りです.
 @ReactMethod
    public void callNativeByCallBack(String msg, Callback successCallback){
        Log.e("wfunny","called by callback");
        String result = "callback     :" +msg;
        successCallback.invoke(result);

    }
2、React native端はindex.android.jsに原生を呼び出す方法コードを追加し、この例はテキストをクリックすることによってトリガされ、コードは以下の通りである.
 render(){
    return (
      
        
                          ,      3s         。
                      ,    ,   alert  ! send   
        
        
           callback       !!!!
        
        
            {this.state.content}
        

      

    );

  }
callNativeByCallBack(msg){
        console.log("js called by callback");
        NativeModules.MyModule.callNativeByCallBack(msg
        ,(result) => {
          this.setState({content:result});
        })
  }

上記のコードからわかるように、calNativeByCallBackは元のモジュールを呼び出して、CallBackはJSのfunctionに対応しています.JSはNativeモジュールを呼び出して処理が終わったら、結果をJSに戻します.Nativeに「calback send ok」というメッセージを送り、2番目のパラメータでフィードバック結果を受信します.Callbackの方式は分かりやすいです.しかし、コールバック方法は、ブリッジ方式の非同期呼出動作であるため、メッセージループを介して完了するので、復帰タイミングは不確定です.
前編:React nativeとAndroid原生インタラクション方式(一)次編:React nativeとAndroid原生インタラクティブ方式(三)