在堆栈导航器中隐藏标题 React 导航

2022-01-23 00:00:00 javascript react-native expo react-navigation

我正在尝试使用堆栈和选项卡导航器切换屏幕.

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:

推荐答案

更新至版本 5

从版本 5 开始，它是 screenOptions

As of version 5 it is the option headerShown in screenOptions

使用示例:

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

如果您只想在 1 个屏幕上隐藏标题，您可以通过在屏幕组件上设置 screenOptions 来实现此目的，例如:

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} />

另请参阅关于第 5 版的博客

See also the blog about version 5

更新
从版本 2.0.0-alpha.36 (2019-11-07) 开始，
有一个新的导航选项:headershown 

      navigationOptions: {
        headerShown: false,
      }

https://reactnavigation.org/docs/stack-navigator#headershown

https://github.com/react-navigation/react-navigation/提交/ba6b6ae025de2d586229fa8b09b9dd5732af94bd

旧答案

我用它来隐藏堆栈栏(注意这是第二个参数的值):

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

相关文章