reactjs - 如何为不同的屏幕设置不同的导航模式？

Question

我对 react-native 很陌生，但我会尽我所能来表达这一点。我有一个底部有导航栏的 react-native 应用程序。如果用户点击其中一个选项，它们将被导航到相应的屏幕。

每个屏幕的模式是默认的“卡片”。这使得屏幕像一副纸牌一样从右侧滑入。

const RootStack = createStackNavigator(
  {
    Main: {
      screen: MainStack,
    },
    MyModal: {
      screen: ModalScreen,
    },
  },
  {
    mode: 'card',
    headerMode: 'none',
  }
);

问题是，我有一个“更多”屏幕，我想表现得不同。它需要从屏幕底部向上滑动。据我了解，“模态”模式可以做到这一点。

mode:'modal',

所以我的问题是，我可以将所有屏幕设置为 mode:'card' 并且只有一个屏幕模式:'modal'吗？有谁知道我是否可以以及如何做到这一点？

Answer 1

直接回答您的问题，React-Navigation文档说 mode只能在导航器级别设置，不适用于单个屏幕:The mode configuration for stack navigator can be either card (default) or modal.
但是，它们确实为实现模态提供了方向:
React-Navigation文档说用 mode: 'modal' 创建一个根导航器，并将您现有的导航器嵌套在其中。当您在应用程序中导航时，您应该能够仅指定屏幕 ID，它会自动确定正确的导航器。

阅读更多:
https://reactnavigation.org/docs/en/modal.html