您的位置:首页 > Web前端 > React

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

2016-01-30 13:44 405 查看
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);

});

运行结果:



成功得到返回值。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: