React-Native传值方式之 :DeviceEventEmitter添加监听控制并传值到其他页面
在 native 开发中,我们可以使用广播实现事件的订阅和事件的触发,从而实现不在该页面但是可以调用该页面的方法。
在 React Native 中,我们也可以使用 DeviceEventEmitter 实现类似的功能
该方法是官方 API,调用时,直接引用就行了。
import {DeviceEventEmitter} from 'react-native';
//…
//调用事件通知
DeviceEventEmitter.emit('xxxName’,param);
//xxxName:通知的名称 param:发送的消息(传参)
如果我们要实现
- 在A页面:点击按钮传递参数到B页面
- 在B页面:使用接收的参数刷新列表
操作如下
- 在B页面实现事件的监听,假设我们将事件命名为 refreshListListener
componentDidMount(){
var self = this;
this.listener =DeviceEventEmitter.addListener('xxxName',function(param){
// use param do something
});
}
//xxxName:通知的名称 param:接收到的消息(传参)
componentWillUnmount(){
this.listener.remove();
}
//在componentWillUnmount 内需要我们手动移除通知
- 在A页面中,发送消息,触发B页面订阅的事件
<TouchableOpacity
onPress={() => {
DeviceEventEmitter.emit('refreshListListener', {name: 'jerry', age: 100});
}
}>
<Text>刷新B页面的列表</Text>
</TouchableOpacity>
React-Native传值方式之 :DeviceEventEmitter添加监听控制并传值到其他页面的更多相关文章
- EventTrigger动态添加监听事件
在 Unity3D 中,通过拖拽的方式在 EventTrigger 组件中添加监听事件就不多说了,很简单.这里主要说的是通过代码动态往 EventTrigger 组件中添加监听事件,有个很坑的地方,就 ...
- Android 给按钮添加监听事件
在安卓开发中,如果要给一个按钮添加监听事件的话,有以下三种实现方式 1.方式一 public class MainActivity extends ActionBarActivity { @Overr ...
- ExtJs 学习之开篇(二) Observable 给类添加监听
html:代码 DOCTYPE html><html><head><meta charset="UTF-8"><title>I ...
- miniui 给表格行添加监听事件的几种方法以及点击某列列名数据不能排序的问题
最近在使用miniui框架做开发,在做表格行的点击监听事件中发现了几个属性,都可以起到监听效果但是执行的结果却大有不同.好了废话不多说,直接上代码. <div id="pageGrid ...
- JS-为句柄添加监听函数
具体谈如何实现JS为句柄添加监听函数之前先看一段代码,算是抛出这个问题. <html> <head> <title>JS为句柄添加监听函数</title> ...
- 11G R2 RAC添加监听
步骤如下: 检查默认network的network number,红色字体1,一会儿添加监听会用到: [grid@rac121 admin]$ srvctl config network Networ ...
- Android中添加监听回调接口的方法
在Android中,我们经常会添加一些监听回调的接口供别的类来回调,比如自定义一个PopupWindow,需要让new这个PopupWindow的Activity来监听PopupWindow中的一些组 ...
- input实时监听控制输入框的输入内容和长度,并进行提示和反馈
一.前言 在MVVM模式下,有个双向数据绑定(data-binding)的优势,可以通过viewmodel实时的监听用户操作,也可以将model的改动实时的反馈到界面上. 那么,在传统的js操控DOM ...
- oracle的监听控制
来自网络: listener control 监听控制 因为你在键入 lsnrctl 回车之后,就进入到监听控制界面. 在启动.关闭或者重启oracle监听器之前确保使用lsnrctl status命 ...
随机推荐
- [易学易懂系列|rustlang语言|零基础|快速入门|(24)|实战2:命令行工具minigrep(1)]
[易学易懂系列|rustlang语言|零基础|快速入门|(24)|实战2:命令行工具minigrep(1)] 项目实战 实战2:命令行工具minigrep 有了昨天的基础,我们今天来开始另一个稍微有点 ...
- eclipse中 Launch configuration的历史记录
最近用eclipse打包jar的时候,需要指定一个main函数.需要先运行一下main函数,eclipse的Runnable JAR File Specification 下的Launch confi ...
- Redux应用多人协作的思路和实现
先上Demo动图,效果如下: 基本思路 由于redux更改数据是dispatch(action),所以很自然而然想到以action作为基本单位在服务端和客户端进行传送,在客户端和服务端用数组来存放ac ...
- robotframework 获取坐标
Get Horizontal Position 获取X轴坐标 Get Vertical Position 获取Y轴坐标 Get Element Size 获取整个图表的高 ...
- ubuntu 添加字体
1. 下载自己需要安装的字体文件 eg: yaheiconsolashybrid.ttf 2. 将字体文件放在目录/home下 3. 到目录/usr/share/fonts/truetype/下建立目 ...
- js深度克隆
function highClone(oldObj){ var cloneObj; if(oldObj.constructor==Object || oldObj.constructor==Array ...
- pdf缩略图上传控件
一. 功能性需求与非功能性需求 要求操作便利,一次选择多个文件和文件夹进行上传:支持PC端全平台操作系统,Windows,Linux,Mac 支持文件和文件夹的批量下载,断点续传.刷新页面后继续传输. ...
- Codevs 1519 过路费(Mst+Lca)
1519 过路费 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 大师 Master 题目描述 Description 在某个遥远的国家里,有 n个城市.编号为 1,2,3,-,n. ...
- bootstrap列表组的使用
<ul class="list-group"> <li class="list-group-item"> <div class=& ...
- 微信小程序mpvue项目使用WuxWeapp前端UI组件
前言:这是一篇简单粗暴的使用指南 在最近的小程序项目里前端UI框架最后选择使用WuxWeapp,这篇文章记录一下如何在小程序mpvue项目中使用该UI组件. 步骤一:下载源码 (地址在这里)主要是里面 ...