详解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 encodeURI和encodeURIComponent的比较
Apr 03 Javascript
关于js new Date() 出现NaN 的分析
Oct 23 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
Javascript 引擎工作机制详解
Nov 30 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
Jun 12 Javascript
jQuery上传插件webupload使用方法
Aug 01 jQuery
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
Jul 31 Javascript
vue环形进度条组件实例应用
Oct 10 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动态生成缩略图并输出显示的方法
2015/04/20 PHP
php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法
2016/03/23 PHP
php生成txt文件实例代码介绍
2016/04/28 PHP
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
Python中使用gflags实例及原理解析
2019/12/13 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
Python求凸包及多边形面积教程
2020/04/12 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
html5实现多文件的上传示例代码
2014/02/13 HTML / CSS
临床医学专业毕业生的自我评价
2013/10/17 职场文书
应届生妇产科护士求职信
2013/10/27 职场文书
生日寿宴答谢词
2014/01/19 职场文书
企业员工培训感言
2014/02/26 职场文书
小学三年级学生评语
2014/04/22 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
采购员岗位职责
2015/02/03 职场文书
2015年办公室人员工作总结
2015/05/15 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers