react-navigation v5/v6如何在单个页面隐藏stack navigation头部导航栏

你当前的配置是全局默认隐藏头部，同时给所有页面单独配置了隐藏头部，和你要的「仅隐藏指定页面头部、其余页面都显示头部」的需求刚好相反，按以下方式修改即可：

1. 先修改Stack.Navigator的全局screenOptions配置，把headerShown设为true，作为所有页面的默认行为
2. 只给需要隐藏头部的单个页面单独配置options={{headerShown: false}}，其余页面不需要额外加headerShown配置

修改后的示例代码如下，比如你要隐藏Start页面的头部，其余都显示：

const Stack = createStackNavigator();

const AppStackNavigator = (props) => {
  return (
    <Stack.Navigator screenOptions={{ swipeEnabled: false, headerShown: true }}>
      {/* 仅需要隐藏头部的页面单独加配置 */}
      <Stack.Screen name="Start" component={Start} options={{ headerShown: false }} />
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Welcome" component={Welcome} />
      <Stack.Screen name="SignUp" component={SignUp} />
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen name="ForgotPassword" component={ForgotPassword} />
      <Stack.Screen name="FavouriteCuisines" component={FavouriteCuisines} />
      <Stack.Screen name="Chef" component={Chef} />
    </Stack.Navigator>
  );
}

export { AppStackNavigator }

如果后续需要隐藏的页面变多，也可以直接在全局screenOptions里通过路由名判断，不需要给每个页面单独加配置，示例如下：

const Stack = createStackNavigator();

const AppStackNavigator = (props) => {
  return (
    <Stack.Navigator 
      screenOptions={({route}) => ({
        swipeEnabled: false,
        // 把需要隐藏头部的页面名放到数组里，匹配到就隐藏
        headerShown: !['Start', 'Login'].includes(route.name)
      })}
    >
      <Stack.Screen name="Start" component={Start} />
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Welcome" component={Welcome} />
      <Stack.Screen name="SignUp" component={SignUp} />
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen name="ForgotPassword" component={ForgotPassword} />
      <Stack.Screen name="FavouriteCuisines" component={FavouriteCuisines} />
      <Stack.Screen name="Chef" component={Chef} />
    </Stack.Navigator>
  );
}

export { AppStackNavigator }

内容的提问来源于stack exchange，提问作者Daniyal Amjad