详解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 汉字字节判断
Aug 01 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
Angular利用trackBy提升性能的方法
Jan 26 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
在vue中使用echarts图表实例代码详解
Oct 22 Javascript
微信小程序使用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 引用文件技巧
2010/03/02 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
IE6,IE7下js动态加载图片不显示错误
2010/07/17 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
node.js中的fs.writeFileSync方法使用说明
2014/12/14 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
原生JS实现垂直手风琴效果
2017/02/19 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
React组件refs的使用详解
2018/02/09 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
python框架中flask知识点总结
2018/08/17 Python
python如何把字符串类型list转换成list
2020/02/18 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
PyQt5实现登录页面
2020/05/30 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
中国网上药店领导者:1药网
2017/02/16 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
英国现代市场:ARKET
2019/04/10 全球购物
全球性的在线商店:Vogca
2019/05/10 全球购物
软件测试工程师面试问题精选
2016/10/28 面试题
培训主管岗位职责
2014/02/01 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
2014年教务处工作总结
2014/12/03 职场文书
酒店宣传语大全
2015/07/13 职场文书
董事长致辞
2015/07/29 职场文书
全民创业工作总结
2015/08/13 职场文书
周一给客户的问候语
2015/11/10 职场文书
人身损害赔偿协议书
2016/03/22 职场文书