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"htmlcode">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, 卸载掉当前页面。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“详解react native页面间传递数据的几种方式”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。