如何在一个屏幕上隐藏反应导航标题 [英] How to hide react navigation header on one screen

问题描述

我需要隐藏我尝试过的应用登陆页面上的导航栏:

I need to hide the navbar on the landing page of an app I tried this:

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

但我收到一条错误消息:

But i get an error saying:

创建导航器不需要参数..."

"Creating a navigator does'nt take an argument..."

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

When I use headerMode="none" it hides the navbar on all screens

 <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>

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

So how can I hide on only one screen?

推荐答案

React Navigation v5.x

options 道具可用于配置导航器内的各个屏幕.您可以使用 headershown 选项:

The options prop can be used to configure individual screens inside the navigator. You can use headershown option:

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

Whether to show or hide the header for the screen. The header is shown by default unless headerMode was set to none. Setting this to false hides the header. When hiding the header on specific screens, you might also want to set headerMode prop to screen. Docs.

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

这篇关于如何在一个屏幕上隐藏反应导航标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！