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

  • 相关阅读:
    针式PKM的主要画面的功能简介
    程序员早日走向架构师的利器:针式PKM V8.01发布
    如何经营你的知识资产
    一般软件工程师怎样拥有更多的资产
    剪贴板的使用技巧
    不要给自己找不“深入学习”的理由了
    《小论无所事事》
    全国(1977年~2011年)历年参加高考人数和录取人数
    Sql Server中,文件批量重命名
    HTML斜线表头
  • 原文地址:https://www.cnblogs.com/lalalagq/p/9921346.html
Copyright © 2011-2022 走看看