详解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 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Feb 04 Javascript
基于jquery实现控制经纬度显示地图与卫星
May 20 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
Typescript3.9 常用新特性一览(推荐)
May 14 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伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
php 小乘法表实现代码
2009/07/16 PHP
PHP中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
php根据一个给定范围和步进生成数组的方法
2015/06/19 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
2017/07/27 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
python:print格式化输出到文件的实例
2018/05/14 Python
python实现简单名片管理系统
2018/11/30 Python
python将处理好的图像保存到指定目录下的方法
2019/01/10 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
哪种Python框架适合你?简单介绍几种主流Python框架
2020/08/04 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
新年抽奖获奖感言
2014/03/02 职场文书
学风建设演讲稿
2014/09/12 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
法人身份证明书
2015/06/18 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书