详解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 相关文章推荐
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
javascript下拉列表菜单的实现方法
Nov 18 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
canvas实现图像放大镜
Feb 06 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
js判断输入框不能为空格或null值的实现方法
Mar 02 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
js+canvas实现刮刮奖功能
Sep 13 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
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中使用redis队列操作实例代码
2013/02/07 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
JS 统计时间
2021/03/09 Javascript
jquery 日期分离成年月日的代码
2010/05/14 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
2015/10/19 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
python 计算文件的md5值实例
2017/01/13 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
Django基础知识 URL路由系统详解
2019/07/18 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
大学生应聘自荐信
2013/10/11 职场文书
客服工作职责
2013/12/11 职场文书
营销总监岗位职责范本
2014/02/26 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
授权收款委托书
2014/09/23 职场文书
2015学校年度工作总结
2015/05/11 职场文书
公司处罚决定书
2015/06/24 职场文书
2015选调生工作总结
2015/07/24 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
Python实现数据的序列化操作详解
2022/07/07 Python