我正在尝试在本机react中重新创建这种风格的堆栈导航器。
这是它的工作视频：https ://youtu.be/l2sMaurPY5E
它的工作方式是，当你点击某个东西时，当前屏幕会略微缩小，新屏幕会出现在它上面。然后您会在屏幕顶部看到一个可见的堆栈，其中显示了图层。
React Native 或者更具体地说，React Navigation 是否可以做到这一点？我什至不知道它叫什么来搜索它。
如何在 React Navigation 中创建具有可见层的堆栈导航器？
IT技术
javascript
reactjs
react-native
react-navigation
2022-07-15 02:22:56
1个回答
这可以在 React Naviagtion 中通过简单地设置presentation到modal你想要的屏幕来实现（通过optionsproperty ，或者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以了解它的实际效果。
