react-native之js事件发送并得到返回结果
2016-01-30 13:44
405 查看
1:新建一个react-native项目,将Android部分导入到Androidstudio中
2:新建一个类 RecevierModule继承ReacContextBaseJavaModule
代码如下:
http://blog.csdn.net/u014041033/article/details/50610873
js端:
1:定义一个receiver.js文件
代码如下
代码如下:
//js调用后天得到返回值
var receive = require('./receiver');
receive.getResult("wyq",(res)=>{
alert(res);
});
运行结果:
成功得到返回值。
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之native主动向js发送事件
- react-native之module的使用
- React Native 中文版
- ReactJs基础_1
- 【React Native开发】React Native控件之ScrollView组件讲解(14)
- 使用react-native做一个简单的应用-02项目搭建与运行
- 使用react-native做一个简单的应用-01项目介绍
- React Native-6.React Native Text组件,多组件封装实战之凤凰资讯页面
- React Native通信机制详解
- React Native工程离线运行(ios)
- React Native 初探
- ubuntu 12.04 react-native 安装
- react-native环境搭建
- 推荐 11 款 React Native 开源移动 UI 组件
- ReactNative使用require引用模块的技巧
- 对Communication between native and React Native官方例子的纠正
- React Native 配置遇到的错误:TransformError
- 【React Native开发】React Native控件之DrawerLayoutAndroid抽屉导航切换组件讲解(13)
- React-Native ListView加载图片淡入淡出效果的组件
- ReactNative与现有的iOS应用程序集成