zoukankan      html  css  js  c++  java
  • react-native页面间传递数据的几种方式

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

    原文地址:https://segmentfault.com/a/1190000016928686

  • 相关阅读:
    排序算法的实现
    图——广度优先遍历(邻接矩阵存储)
    最大子列和问题-4种解法
    PATB 1015. 德才论 (25)
    PATB 1018. 锤子剪刀布
    PATB 1019. 数字黑洞 (20)
    常用协议的默认端口号
    统一资源定位符URL
    hdoj1009 FatMouse' Trade——贪心算法
    hdoj2037 贪心算法——今年暑假不AC
  • 原文地址:https://www.cnblogs.com/lalalagq/p/9921346.html
Copyright © 2011-2022 走看看