如何在一个屏幕上隐藏反应导航标题

Question

我需要在我尝试过的应用程序的登录页面上隐藏导航栏：

const Stack = createStackNavigator(
  {
    Landing: {screen: LandingScreen},
  },
  {
    headerMode: 'none',
    navigationOptions: {
      headerVisible: false,
    },
  },
);

但我收到一条错误消息：

“创建导航器不需要争论……”

当我使用headerMode="none"它时会隐藏所有屏幕上的导航栏

 <NavigationContainer>
      <Stack.Navigator
        headerMode="none" // this hides on all screens
        screenOptions={{
          headerStyle: {
            backgroundColor: '#3c74db',
          },
          headerTintColor: '#fff',
          headerTitleStyle: {
            fontWeight: 'bold',
          },
        }}>
        <Stack.Screen
          name="Landing"
          component={LandingScreen}
          options={{headerShown: 'none'}} // This does not work
        />
        <Stack.Screen name="Sales" component={SalesScreen} />
        <Stack.Screen name="Sign In" component={SignInScreen} />
        <Stack.Screen name="Register" component={RegisterScreen} />
        <Stack.Screen name="Create Item" component={CreateItemScreen} />
        <Stack.Screen name="Payment" component={PaymentScreen} />
      </Stack.Navigator>
    </NavigationContainer>

那么我怎样才能只在一个屏幕上隐藏呢？

Answer 1

反应导航 v5.x

该选项道具可以用来配置导航仪内各个屏幕。您可以使用headershown选项：

是否显示或隐藏屏幕的标题。除非 headerMode 设置为 none，否则默认显示标题。将此设置为 false 会隐藏标题。在特定屏幕上隐藏标题时，您可能还需要将 headerMode 属性设置为 screen。文档。

<Stack.Navigator ...>
 ...
  <Stack.Screen
    name="Landing"
    component={LandingScreen}
    options={{
      headerShown: false, // change this to `false`
    }}
  />
...
</Stack.Navigator>