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

 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();
}

// 触发concactAdd事件广播
handleOk = (names: []) => {
  const { field } = this.props;
  DeviceEventEmitter.emit('concactAdd', { [field]: names });
 }

// 定义路由跳转函数 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, 卸载掉当前页面。


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