详解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 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
bootstrap table实现单击单元格可编辑功能
Mar 28 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
Angular使用动态加载组件方法实现Dialog的示例
May 11 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
vue-cli 首屏加载优化问题
Nov 06 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
javascript实现固定侧边栏
Feb 09 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无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
python让列表倒序输出的实例
2018/06/25 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
python变量命名的7条建议
2019/07/04 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
django 解决自定义序列化返回处理数据为null的问题
2020/05/20 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
通过自学python能找到工作吗
2020/06/21 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
应届毕业生求职信
2013/11/30 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android