React nativeとAndroid原生インタラクティブ方式(二)
1982 ワード
前言
前の記事では、イベントを送信する方式でReact nativeとAndroidの間の通信を紹介していますが、もし知りたいなら、この記事を見てください.React nativeとAndroid元とのインタラクティブ方式を紹介します.ここでは、第二の通信方式、すなわちコールバック方式を紹介します.
Callback方式
原生モジュールには特別なパラメータがあります.それはコールバック関数です.ほとんどの場合、JavaScriptにフィードバック方法を提供します.具体的にはどのようにフィードバック方法を提供しますか?前の文章の中で原生モジュールをReact nativeの先端にパッケージングして呼び出しますか?呼び出された方法は@ReactMethodで注釈します.そうだ、ここも同じです.コードはどのように実現されているかを見てみます.本論文のコードは、前の記事の項目コードの例に基づいている.
1、元のモジュールではまずMyModuleクラスにRnで呼び出される方法を追加します.コードは以下の通りです.
前編:React nativeとAndroid原生インタラクション方式(一)次編:React nativeとAndroid原生インタラクティブ方式(三)
前の記事では、イベントを送信する方式で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原生インタラクティブ方式(三)