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

  • 相关阅读:
    Tencent 闲聊对话机器人接口调用,画像:设计员小白
    logging模块简介python
    jieba分词的几种形式
    h5py这个坑-PyCharm Process finished with exit code -1073741819 (0xC0000005)
    python之six模块的用法six.py2 six.py3
    Swoole从入门到入土(8)——协程初探
    Swoole从入门到入土(7)——TCP服务器[大杂烩]
    Swoole从入门到入土(6)——TCP服务器[粘包]
    Swoole从入门到入土(5)——TCP服务器[异步任务]
    Swoole从入门到入土(4)——TCP服务器[正确重启]
  • 原文地址:https://www.cnblogs.com/lalalagq/p/9921346.html
Copyright © 2011-2022 走看看