React Native-Android

react-native之js事件发送并得到返回结果

2016-11-30  本文已影响13人  来自猴子的暴击

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);
});

运行结果:

上一篇 下一篇

猜你喜欢

热点阅读