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

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?

回答1:

React Navigation v5.x

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

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>

回答2:

Try this :

export default class Onboarding extends Component {

  static navigationOptions = { header: null };

  ...
}

Hope it helps

来源：https://stackoverflow.com/questions/60428257/how-to-hide-react-navigation-header-on-one-screen

标签

javascript

react-native

react-navigation