首页 > 开发 > JS > 正文

详解react native页面间传递数据的几种方式

2024-05-06 16:46:45
字体:
来源:转载
供稿:网友

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, 卸载掉当前页面。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持VeVb武林网。


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表