详解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 相关文章推荐
js 事件处理函数间的Event物件是否全等
Apr 08 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
Sep 04 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
基于JavaScript实现单例模式
Oct 30 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 empty函数报错解决办法
2014/03/06 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
javascript prototype原型操作笔记
2009/12/07 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
jquery validate demo 基础
2015/10/29 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
JS实现轮播图效果
2020/01/11 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
简单实现python数独游戏
2018/03/30 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
学python需要去培训机构吗
2020/07/01 Python
护理自荐信范文
2013/10/05 职场文书
团员的自我评价
2013/12/01 职场文书
导师工作推荐信范文
2014/05/17 职场文书
2014年国庆节演讲稿精选范文1500字
2014/09/25 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
投诉信格式范文
2015/07/02 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
Python爬虫之爬取二手房信息
2021/04/27 Python
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python