Remove top navigation bar for certain screens

问题:

Is there a way of removing the top navigation bar for specific screens only? I am using react-navigation.

I already tried the following:

header: { visible: false }

but it only hides the navbar. The space of the navbar is still cannot be used.

Thanks in advance!

回答1:

This is an example of how I did mine using StackNavigator:

const stackN = StackNavigator({
    Screen1 : {
      screen: Screen1,
      navigationOptions: {
        header: null,
      }
    },
    Home : {
      screen: HomeScreen,
      navigationOptions: ({navigation}) => ({
        title: 'Home',
        headerStyle: styles.headerStyle,
        headerTitle: <Text>Home</Text>,
        headerLeft : null,
        headerRight: null,
      })
    }, 
}, {headerMode: 'screen'})

So every screen have their own navigationOptions instead. There may be a way to share navigationOptions, but I haven't looked into it at the moment.

回答2:

When using createStackNavigator then top navigation bar can be removed as below.

const AppStack = createStackNavigator({ Home: MainTabNavigator }, { headerMode: 'none' });

回答3:

Use navigationOptions: { header: null } to remove the top navigation bar.

Sample Code:

import { createStackNavigator, createAppContainer } from 'react-navigation';

import {Login} from './app/components/login/Login';
import {Register} from './app/components/register/Register';
import {Home} from './app/components/home/Home';

const AppNavigator = createStackNavigator(
    {
        Login: { 
                  screen: Login,
                  navigationOptions: {
                    header: null,
                  }
               },
        Register: { 
                    screen: Register, 
                    navigationOptions: {
                      header: null,
                    }  
                  },
        Home: { 
                screen: Home, 
                navigationOptions: {
                  header: null,
                }
              },
    },
    {
        initialRouteName: "Login"
    }
);

export default createAppContainer(AppNavigator);

回答4:

Use navigationOptions: { headerShown: false } instead of navigationOptions: { header: null } to remove the top navigation bar.

回答5:

"headerShown : false " in the latest React Native version