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

React Navigation v5.x

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

显示还是隐藏屏幕标题。默认情况下显示标题，除非headerMode设置为none。将此设置为false将隐藏标题。在特定屏幕上隐藏标题时，您可能还需要将headerMode属性设置为屏幕。 Docs。

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

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

1 个答案: