如何在 react-navigation v6 的单个屏幕中隐藏堆栈导航 header

Question

我正在使用堆栈导航版本 5，我需要 headers 用于除一个屏幕之外的所有屏幕，我尝试通过屏幕内的选项来执行此操作，如下所示：

这是我的代码：

const Stack = createStackNavigator();

const AppStackNavigator = (props) => {
  return (
    <Stack.Navigator screenOptions={{ swipeEnabled: false, headerShown: false }}>
      <Stack.Screen name="Start" component={Start} options={{ headerShown: false }} />
      <Stack.Screen name="Home" component={Home} options={{ headerShown: false }} />
      <Stack.Screen name="Welcome" component={Welcome} options={{ headerShown: false }} />
      <Stack.Screen name="SignUp" component={SignUp} options={{ headerShown: false }} />
      <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
      <Stack.Screen name="ForgotPassword" component={ForgotPassword} options={{ headerShown: false }} />
      <Stack.Screen name="FavouriteCuisines" component={FavouriteCuisines} options={{ headerShown: false }} />
      <Stack.Screen name="Chef" component={Chef} options={{ headerShown: false }} />
    </Stack.Navigator>
  );
}

export { AppStackNavigator }

Answer 1

您的答案已经在您的代码中只需删除所有 headerShown: false 除了你想看到的 headers 看画面：

<Stack.Screen name="Chef" component={Chef} options={{ headerShown: false }} />

对于任何屏幕，如果您想隐藏 header 只需在其他 [=19= 的选项属性中添加 headerShown: false ]显示将默认为真。

如何在 react-navigation v6 的单个屏幕中隐藏堆栈导航 header

How to hide stack navigation header from a single screen in react-navigation v6

react-native

react-navigation