天天看點

react-native之js事件發送并得到傳回結果

1:建立一個react-native項目,将Android部分導入到Androidstudio中

2:建立一個類 RecevierModule繼承ReacContextBaseJavaModule

代碼如下:

package com.wyq;
import android.util.Log;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import java.util.HashMap;
import java.util.Map;
/**
 * Created by wyq on 2016/1/26.
 */
public class RecevierModule extends ReactContextBaseJavaModule {
    private static final String TAG = "RecevierModule";
    public RecevierModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }
    @Override
    public String getName() {
        return "RecevierModule";
    }
    @ReactMethod//前段調用 并将參數message + <span style="font-family: Arial;">字元串</span><span style="font-family: Arial;">success傳回給前段 callback為react-native的一個類</span>
    public void getResult(String message, final Callback callback) {
        Log.i(TAG, "getResult");
        callback.invoke(message +"  success");
    }
}
           

3:将module加入package中 并且注冊package 不在叙述詳情參考

    http://blog.csdn.net/u014041033/article/details/50610873

js端:

1:定義一個receiver.js檔案

   代碼如下

'use strict';
var { NativeModules } = require('react-native');
 var ReceiverModule = NativeModules.RecevierModule;
var Receiver = {
     getResult:function(
     msg: string,
     callback: Function)://注意這裡是Function類 不是function函數
     void{
      ReceiverModule.getResult(msg,callback);
      },
};
module.exports = Receiver;
           

2:index.android.js中

代碼如下:

//js調用後天得到傳回值

var receive = require('./receiver');

receive.getResult("wyq",(res)=>{

alert(res);

});

運作結果:

react-native之js事件發送并得到傳回結果

成功得到傳回值。