React Native 原生与JS之间事件绑定注册 作用在于原生可以直接调用JS的方法
来源:互联网 发布:博威造价软件 编辑:程序博客网 时间:2024/05/10 23:44
1 前面我们已经说过了RN混合开发中,原生如何调用JS的各个页面 JS如何调用原生的activity,以及JS中如何调用原生的方法.
2 这些已经比较简单的,这一节主要说,我们如果在原生JAVA代码中,某个时刻非常想响应JS的某个方法怎么办.
目前,我还没有了解到如何可以直接调用JS的某个方法,我的做法是采用事件响应的方式,就跟Android原生的按钮绑定了某个事件一样,如果收到这个消息,JS端就去执行这个操作.下面具体说一下.
1 JAVA端注册事件
如何注册时间呢,
public static void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap paramss) { if(reactContext!=null){ reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, paramss); } }
在这段代码里面,是一个发送到JS端事件的方法,其中reactContext这个context,是在ReactModule这个类中产生的.它继承ReactContextBaseJavaModule这个类.了解的话应该清楚,
我们可以在需要的类中,设置静态变量,然后在ReactModule这个类的构造方法中传递这个对象.
public static ReactContext mReactContext;
eventName这个参数,是事件的名称.paramss这个参数是事件的参数.
2 JAVA端发送消息
我们要想在JAVA端调用JS的方法,也就是通过消息来判断应该调用哪个方法,跟上节说的,调用JS的activity一样,JS只有一个activity,但是它有很多的页面,具体显示哪一个页面,可以通过我们传递的参数来区分.
WritableMap event = Arguments.createMap();event.putString("type","abc");sendEvent(mReactContext, "ABC",event);
前两行代码是设置参数,最后一个方法是发送数据.
下边我们来看一下JS端是如何接收和处理的.
3 JS端接收和处理
DeviceEventEmitter这是JS端设置注册事件,需要用到的组件.
import { AppRegistry, DeviceEventEmitter,} from 'react-native';
看到这段代码,应该比较容易理解.我们在JS组件生命周期开始的部分,注册接收的事件.
this.ABC = DeviceEventEmitter.addListener('ABC', function (e: Event) { if ('abc' == e.type) { that.setState({ ABC: true }); } });
这段代码可以写在componentDidMount这个生命周期之中,addListener(‘ABC’, 这个地方的ABC与sendEvent(mReactContext, “ABC”,event);这里面的ABC是对应的.
if (‘abc’ == e.type) {这个地方的type和abc与event.putString(“type”,”abc”);这个里面的是对应的,相比这样就更加清楚了.
这样的话,当JAVA端发了消息,我在JS端就收到了,收到之后,想执行什么方法就是我的事了,这个需求就可以满足了.
- React Native 原生与JS之间事件绑定注册 作用在于原生可以直接调用JS的方法
- react native js调用android原生activity
- 原生JS的事件绑定
- 原生JS的事件绑定
- react native 与原生之间的交互
- react-native调用Android的原生方法
- 原生JS绑定事件的兼容性写法与绑定事件的几种方法
- react-native 调用原生方法
- 原生js和jquery框架下绑定事件的方法
- 原生js事件的绑定和解除
- js原生事件怎么注册
- Android之WebView与原生js之间的相互调用
- React Native 教程 demo1 认识js与app原生控件
- React Native 与原生之间的通信(iOS)
- React-Native与原生之间的交互简介
- React-Native调用iOS原生方法
- JS与原生OC互相调用方法
- react-native 与原生互相调用
- android 开源框架梳理
- java
- TensorFlow21: 把Deep Dream应用到视频上
- AE学习笔记之地图编辑(上)
- Mac matlab copy figure 失效
- React Native 原生与JS之间事件绑定注册 作用在于原生可以直接调用JS的方法
- docker 文章参考
- 使用tcpTrace监听wcf消息
- JavaSE基础01
- TensorFlow22: 手写汉字识别
- Python 运算符重载
- python连接msSqlServer
- 6、输入子系统驱动编写
- Oozie workflow.xml 视图解析