如何在 React Navigation 中创建具有可见层的堆栈导航器？

【问题标题】：How do I create a stack navigator with visible layers in React Navigation?如何在 React Navigation 中创建具有可见层的堆栈导航器？
【发布时间】：2021-09-22 17:48:09
【问题描述】：

我正在尝试在 react native 中重新创建这种风格的堆栈导航器。

这是它的工作视频：https://youtu.be/l2sMaurPY5E

它的工作方式是，当您点击某物时，当前屏幕会略微缩小，新屏幕会出现在其上方。然后您会在屏幕顶部看到一个可见的堆栈，其中显示了图层。

React Native 或者更具体地说，React Navigation 是否可以做到这一点？我什至不知道它叫什么来搜索它。

【问题讨论】：

感谢@Kartikey 的编辑。由于低代表，它不会让我添加照片。
这看起来像Modal。这种效果可以使用像react-native-modal这样的自定义库来实现

标签： javascript reactjs react-native react-navigation

【解决方案1】：

这可以在 React Naviagtion 中实现，只需将 presentation 设置为 modal 到你想要的屏幕（通过 options 属性，或者如果你想要的话，将 screenOptions 设置为整个堆栈）。要使其在 Android 中运行，您可能需要传递一些额外的 props。

简单来说，你可以像下面这样定义你的导航器，

<NavigationContainer>
  <Stack.Navigator
    //define below properties to enable the modal presentation
    screenOptions={{ 
      presentation: 'modal',
      headerMode: 'none',
      cardStyleInterpolator: CardStyleInterpolators.forModalPresentationIOS,
      gestureEnabled: true,
      cardOverlayEnabled: true,
    }}
  >
    <Stack.Screen name="home" component={Home} />
    <Stack.Screen name="Modal" component={Modal} />
  </Stack.Navigator>
</NavigationContainer>

看看这个Live Snack 看看它的实际效果。

【讨论】：