0

我正在尝试使用 react-native-navigation v2 构建一个动态向导。
我说动态是因为步骤数可能会根据用户选择的选项而有所不同。

我正在考虑使用嵌套堆栈，所以我的应用程序的布局看起来像这样： 

{
  root: {
    sideMenu: {
      left: {/*...*/},
      center: {
        stack: {
          children: [component1, /*...,*/ componentX]
        }
      }
    }
  }
}

ComponentX 是我启动向导的地方，所以我推送一个新堆栈，如下所示： 

{
// ...
  stack: {
    children: [
      component1,
      //...,
      componentX,
      {
        stack: {
          children: [step1, step2, /*...,*/ stepN]
        }
      }
    ]
  }
}

在用户在 stepN 上做出最后一个选择后，我想用一个摘要屏幕替换嵌套堆栈，使其具有如下内容： 

{
//...
  stack: {
    children: [
      component1,
      //...,
      componentX,
      summaryScreen
    ]
  }
}

我可以用它Navigation.setRoot来重置整个事情，但这意味着我可能不得不将导航存储在 Redux 中。我也尝试过使用Navigation.setStackRoot，但我的印象是它设置了父堆栈根而不是我的嵌套堆栈......

4

1 回答 1

0

我终于设法解决了。
就是这样：

  1. 在我的应用程序开始时，当我给我的主堆栈一个 id
const sideMenu = {
    left: { /*...*/ },
    center: {
      stack: {
        id: 'main', // this line is important
        children: [/*...*/]
      }
    },
  };
  Navigation.setRoot({
    root: { sideMenu },
  });
  1. 当我想启动我的向导时，我推送一个新堆栈
Navigation.push(componentId, {
  stack: {
    id: 'wizard',
    children: [
      {
        component: { /*...*/ },
      },
    ],
  }
})

  1. wizard随着用户的进展，我将屏幕推送到新堆栈上

  2. 当我想显示最终的摘要屏幕时，我在嵌套堆栈上调用 setStackRoot

Navigation.setStackRoot('wizard', [
  {
    component: { /*...*/ },
  },
]);
  1. 在那个摘要屏幕上，我有一个标记为“完成”的按钮，它删除了嵌套堆栈
Navigation.pop('main');

编辑：仅使用这种方法，如果您在嵌套屏幕上单击后退箭头，它将关闭整个嵌套堆栈，而不仅仅是这个屏幕。
我必须使用自定义后退按钮，如下所示：

我通过使用自定义后退按钮解决了这个问题： 1. 当推送一个我想要覆盖按钮的新屏幕时，使用选项

import Icon from 'react-native-vector-icons/MaterialIcons';
/* ... */
const backIcon = await Icon.getImageSource('arrow-back', 24, '#000');
const component = {
  id: screenID,
  name: screenID,
  passProps,
  options: {
    topBar: {
      leftButtons: [
        {
          id: 'backButton',
          icon: backIcon,
        },
      ],
    },
  }
};
return Navigation.push(componentId, { component });
  1. 创建一个 HOC 来实现您的自定义后退操作
import React, { Component } from 'react';
import { Navigation } from 'react-native-navigation';

const getDisplayName = WrappedComponent => WrappedComponent.displayName || WrappedComponent.name || 'Component';

export default function withCustomBackButton(WrappedComponent) {
  class WithCustomBackButton extends Component {
    componentDidMount() {
      this.navigationEventListener = Navigation.events().bindComponent(this);
    }

    componentWillUnmount() {
      if (this.navigationEventListener) this.navigationEventListener.remove();
    }

    navigationButtonPressed() {
      // Your custom action
      const { componentId } = this.props;
      Navigation.pop(componentId);
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  }

  WithCustomBackButton.displayName = `WithCustomBackButton(${getDisplayName(WrappedComponent)})`;

  return WithCustomBackButton;
}
  1. 使用自定义后退按钮注册屏幕时，将其包装在您的 HOC 中
import withCustomBackButton from '../components/hoc/WithCustomBackButton';
/* ... */
Navigation.registerComponent('selectLocation', () => withCustomBackButton(SelectLocation));
于 2019-04-01T04:52:58.393 回答