详解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 相关文章推荐
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
javasctipt如何显示几分钟前、几天前等
Apr 30 Javascript
node.js中的path.isAbsolute方法使用说明
Dec 08 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 Javascript
JS简单实现String转Date的方法
Mar 02 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
微信小程序 rich-text的使用方法
Aug 04 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 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利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
openPNE常用方法分享
2011/11/29 PHP
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
PHP实现无限分类的实现方法
2016/11/14 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
JavaScript中常用的运算符小结
2012/01/18 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
深入浅析JavaScript中的constructor
2016/04/19 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
非常优秀的JS图片轮播插件Swiper的用法
2017/01/03 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
vue二级路由设置方法
2018/02/09 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
2018/09/18 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
用Python生成器实现微线程编程的教程
2015/04/13 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
python如何制作英文字典
2019/06/25 Python
django ajax发送post请求的两种方法
2020/01/05 Python
python实现门限回归方式
2020/02/29 Python
数据库的约束含义
2012/09/09 面试题
社会学专业求职信
2014/02/24 职场文书
罚站检讨书
2015/01/29 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
如何利用python创作字符画
2022/06/25 Python
详解CSS3浏览器兼容
2022/12/24 HTML / CSS