详解react native页面间传递数据的几种方式


Posted in Javascript onNovember 07, 2018

1. 利用react-native 事件DeviceEventEmitter 监听广播

应用场景:

- 表单提交页面, A页面跳转到B页面选人, 然后返回A页面, 需要将B页面选择的数据传回A页面。
- 多个多媒体来回切换播放,暂停后二次继续播放等问题。

代码如下:

A页面

componentDidMount() {
 // 利用DeviceEventEmitter 监听 concactAdd事件
  this.subscription = DeviceEventEmitter.addListener('concactAdd', (dic) => {// dic 为触发事件回传回来的数据
   // 接收到 update 页发送的通知,后进行的操作内容
   if (dic.approver_list) {
    this.setState((preState: Object) => {
     this.updateInputValue(preState.approver_list.concat(dic.approver_list), 'approver_list');
     return { approver_list: preState.approver_list.concat(dic.approver_list) };
    });
   }
   if (dic.observer_list) {
    this.setState((preState: Object) => {
     this.updateInputValue(preState.observer_list.concat(dic.observer_list), 'observer_list');
     return { observer_list: preState.observer_list.concat(dic.observer_list) };
    });
   }
  });
...
componentWillUnmount() {
  this.subscription.remove();
}

B页面

// 触发concactAdd事件广播
handleOk = (names: []) => {
  const { field } = this.props;
  DeviceEventEmitter.emit('concactAdd', { [field]: names });
 }

2. 用react-navigation提供的路由之间

A页面

// 定义路由跳转函数 cb表示需要传递的回调函数
export const navigateToLinkman = (cb: Function, type?: string, mul?: boolean): NavigateAction =>
 NavigationActions.navigate({ routeName: 'Linkman', params: { cb, type, mul } });
 // 跳转选择人员页面
  handleSelectUser = () => {
   Keyboard.dismiss();
   this.props.actions.navigateToLinkman(this.selectedUser, '', true);
...
// 选择人员后的回调函数
selectedUser = (selectUser: string[]) => {
   this.setState((preState) => {
    const newEmails = preState.emails.concat(selectUser);
    const emails = [...new Set(newEmails)];
    return {
     emails,
    };
   });
  }

B页面

handleToUser = () => {
  ...
  navigation.state.params.cb(user.email, group);
  ...
}

3. 利用react-navigation 提供的路由事件监听触发事件

在A页面路由失去焦点的时候触发该事件

componentDidMount() { 
this.props.navigation.addListener('didBlur', (payload) => {
     if (this.modalView) this.modalView.close();
    });
  }

那么问题来了, 为何不在页面卸载(componentWillunmount)的时候触发该事件?

如果不了解react-native和react-navigation, 会很困惑, A页面卸载了, 为什么还能接收到来自B页面的数据或者事件, 原因是: react-navigation中, A页面跳转到B页面, A页面没有卸载, 只是在它提供的路由栈中堆积,例如A跳转到B中, A页面不执行componentWillunmount,当每一个路由pop掉的时候才会执行componentWillunmount, 卸载掉当前页面。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript下操作css的float属性的特殊写法
Aug 22 Javascript
js 小贴士一星期合集
Apr 07 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
js动态在form上插入enctype=multipart/form-data的问题
May 24 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
JS & JQuery 动态添加 select option
Jun 08 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
微信小程序使用npm支持踩坑
Nov 07 #Javascript
Angular Material Icon使用详解
Nov 07 #Javascript
详解Webpack loader 之 file-loader
Nov 07 #Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 #Javascript
javascript动态创建对象的属性详解
Nov 07 #Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 #Javascript
详解在vue-test-utils中mock全局对象
Nov 07 #Javascript
You might like
如何从一个php文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
php查询ip所在地的方法
2014/12/05 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
JS的IE和Firefox兼容性集锦
2006/12/11 Javascript
checkbox 多选框 联动实现代码
2008/10/22 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
javascript基本算法汇总
2016/03/09 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
javascript实现简易聊天室
2019/07/12 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
2019/11/01 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
webpack4从0搭建组件库的实现
2020/11/29 Javascript
[36:37]2014 DOTA2华西杯精英邀请赛5 24 VG VS iG
2014/05/25 DOTA
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
公司聘任书模板
2014/03/29 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
画展邀请函
2015/01/31 职场文书
鼋头渚导游词
2015/02/05 职场文书
七年级作文之英语老师
2019/10/28 职场文书
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python