Hide header in stack navigator React navigation

问题

I'm trying to switch screen using both stack and tab navigator.

const MainNavigation = StackNavigator({
      otp: { screen: OTPlogin },
      otpverify: { screen: OTPverification},
      userVerified: {
        screen: TabNavigator({
          List: { screen: List },
          Settings: { screen: Settings }
        }),
      },
    });

In this case stacknavigator is used first and then tabnavigator. and i want to hide headers of stack navigator. WIt is not working properly when i use navigationoptions like::

navigationOptions: { header: { visible: false } }

i'm trying this code on first two components which are using in stacknavigator. if i use this line then getting some error like::

回答1:

I use this to hide the stack bar (notice this is the value of the second param):

{
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false,
    }
}

When you use the this method it will be hidden on all screens.

In your case it will look like this:

const MainNavigation = StackNavigator({
  otp: { screen: OTPlogin },
  otpverify: { screen: OTPverification },
  userVerified: {
    screen: TabNavigator({
    List: { screen: List },
    Settings: { screen: Settings }
   }),
 }
},
{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
 }
);

UPDATE
As of version 2.0.0-alpha.36 (2019-11-07),
there is a new navigationOption: headershown

      navigationOptions: {
        headershown: false,
      }

https://reactnavigation.org/docs/en/next/native-stack-navigator.html#headershown
https://github.com/react-navigation/stack/commit/0375864e5a838f984b9fe04a81ab18a0744ac474

回答2:

Simply use below code in the page you want to hide the header

export default class Login extends Component {
    static navigationOptions = {
        header: null
    }
}

refer to Stack Navigator

回答3:

Just add this into your class/component code snippet and Header will be hidden

 static navigationOptions = { header: null }

回答4:

If your screen is a class component

static navigationOptions = ({ navigation }) => {
    return {
       header: () => null
    } 
}

code this in your targeted screen as the first method (function).

回答5:

If you want to hide on specific screen than do like this:

// create a component
export default class Login extends Component<{}> {
  static navigationOptions = { header: null };
}

回答6:

I am using header : null instead of header : { visible : true } i am using react-native cli. this is the example :

static navigationOptions = {
   header : null   
};

回答7:

If someone searching how to toggle header so in componentDidMount write something like:

  this.props.navigation.setParams({
      hideHeader: true,
  });

When

static navigationOptions = ({ navigation }) => {
    const {params = {}} = navigation.state;

    if (params.hideHeader) {
      return {
        header: null,
      }
    }

    return {
        headerLeft: <Text>Hi</Text>,
        headerRight: <Text>Hi</Text>,
        headerTitle: <Text>Hi</Text>
    };
};

And somewhere when event finish job:

this.props.navigation.setParams({
  hideHeader: false,
});

回答8:

This worked for me:

const Routes = createStackNavigator({
Intro: {
    screen: Intro,
    navigationOptions: {
        header: null,
    }
}
},
    {
        initialRouteName: 'Intro',
    }
);

回答9:

Use

static navigationOptions = { header: null } 

in class/component like

class Login extends Component {

    static navigationOptions = {
        header: null
    }
}

回答10:

Add new navigationOptions object in the stackNavigator.

Try this :

const MainNavigator = createStackNavigator({
  LoginPage: {screen : LoginPageContainer, navigationOptions: { header: null } },
  MiddlePage: {screen : MiddlePageContainer, navigationOptions: { header: null } },
  SMS: {screen: ShowSmsContainer, navigationOptions: { header: null } },
  Map: {screen: ShowMapContainer, navigationOptions: { header: null } }
});

Hope it helps.

回答11:

In your targeted screen you have to code this !

 static navigationOptions = ({ navigation }) => {
    return {
       header: null
    }
 }

回答12:

const CallStack = createStackNavigator({
  Calls: Calls,
  CallsScreen:CallsScreen,
}, {headerMode: 'none'});

CallStack.navigationOptions = {
  tabBarLabel: 'Calls',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
    />
  ),

   header: null,

        headerVisible: false,

};

回答13:

All the answer are showing how to do it with class components, but for functional components you do:

const MyComponent = () => {
    return (
        <SafeAreaView>
            <Text>MyComponent</Text>
        </SafeAreaView>
    )
}

MyComponent.navigationOptions = ({ /*navigation*/ }) => {
    return {
        header: null
    }
}

If you remove the header your component may be on places where you can't see it (when the phone don't have square screen) so it's important to use it when removing the header.

回答14:

I've the same problem but I've done my header work in the individual classes using navigationOptions and I'm using createBottomTabNavigator whose header is visible and the header of classes is not visible. I've tried everything like headerMode: none, header: null and so on, but couldn't hide the header of bottomTabNavigator.

来源：https://stackoverflow.com/questions/44701245/hide-header-in-stack-navigator-react-navigation