详解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之WEB开发调试利器:Firebug 下载
Jan 13 Javascript
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
用javascript作一个通用向导说明
Aug 30 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
jQuery通过扩展实现抖动效果的方法
Mar 11 Javascript
JavaScript获取DOM元素的11种方法总结
Apr 25 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
node.js博客项目开发手记
Mar 16 Javascript
微信公众号H5支付接口调用方法
Jan 10 Javascript
Vue中的this.$options.data()和this.$data用法说明
Jul 26 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
微信小程序使用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中session_unset与session_destroy的区别分析
2011/06/16 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
javascript实现列表切换效果
2016/05/02 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
JavaScript实现异步图像上传功能
2018/07/12 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
python使用正则搜索字符串或文件中的浮点数代码实例
2014/07/11 Python
python time模块用法实例详解
2014/09/11 Python
python实现多线程的两种方式
2016/05/22 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
机械设计专业应届生求职信
2013/11/21 职场文书
双语教学实施方案
2014/03/23 职场文书
人事局接收函
2015/01/31 职场文书
行政经理岗位职责
2015/04/15 职场文书
mysql 带多个条件的查询方式
2021/06/05 MySQL
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL