javascript - Hide header in stack navigator React navigation - Stack Overflow

admin管理员组

文章数量:1125968

I'm trying to switch screens 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 stack navigator is used first and then tab navigator. I want to hide the headers from stack navigator. Which is not working properly when I use navigation options 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:

I'm trying to switch screens 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 stack navigator is used first and then tab navigator. I want to hide the headers from stack navigator. Which is not working properly when I use navigation options 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:

• javascript
• react-native
• react-navigation
• expo

Share Improve this question Follow edited Sep 16, 2021 at 20:51 Ricardo Sanchez 5,1571212 gold badges6060 silver badges9595 bronze badges asked Jun 22, 2017 at 13:45 Avijit DuttaAvijit Dutta 3,86133 gold badges1414 silver badges1616 bronze badges

Add a comment  | 

38 Answers 38

Sorted by: Reset to default 1 2 Next 874

UPDATE as of version 5

As of version 5 it is the option headerShown in screenOptions

Example of usage:

<Stack.Navigator
  screenOptions={{
    headerShown: false
  }}
>
  <Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>

If you want only to hide the header on 1 screen you can do this by setting the screenOptions on the screen component see below for example:

<Stack.Screen options={{headerShown: false}} name="route-name" component={ScreenComponent} />

See also the blog about version 5

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/stack-navigator#headershown

https://github.com/react-navigation/react-navigation/commit/ba6b6ae025de2d586229fa8b09b9dd5732af94bd

Old answer

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,
  }
 }
);

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

In the given solution Header is hidden for HomeScreen by- options={{headerShown:false}}

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen} options={{headerShown:false}}/>
    <Stack.Screen name="Details" component={DetailsScreen}/>
  </Stack.Navigator>
</NavigationContainer>

v6

headerMode prop has been removed from react navigation 6.x. Now we can use headerShown option to achieve the same result.

<Stack.Navigator screenOptions={{ headerShown: false }}>
   {/* Your screens */}
</Stack.Navigator>

---

v5

In react navigation 5.x you can hide the header for all screens by setting the headerMode prop of the Navigator to false.

<Stack.Navigator headerMode={false}>
   {/* Your screens */}
</Stack.Navigator>

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

 static navigationOptions = { header: null }

React Native Navigation v6.x May 2022

put false in headerShown property in options prop of Screen

        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen
            name="Home"
            component={Home}
            options={{ headerShown: false }}
          />
        </Stack.Navigator>
      

P.S
const Stack = createNativeStackNavigator().

{/*✌✌✌

本文标签： javascriptHide header in stack navigator React navigationStack Overflow