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

javascript react-native react-navigation expo

2022-08-30 00:07:48

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

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

在这种情况下，首先使用堆栈导航器，然后使用选项卡导航器。我想从堆栈导航器中隐藏标题。当我使用导航选项时，这不能正常工作，例如：

navigationOptions: { header: { visible: false } }

我正在堆栈导航器中使用的前两个组件上尝试此代码。如果我使用这行，那么会得到一些错误，如：

答案 1

从版本 5 开始更新

从版本5开始，它是headerShownscreenOptions

用法示例：

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

如果您只想在1个屏幕上隐藏标题，则可以通过在屏幕组件上设置screenOptions来执行此操作，例如：

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

另请参阅有关版本 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/commit/ba6b6ae025de2d586229fa8b09b9dd5732af94bd

旧答案

我用它来隐藏堆栈栏（请注意，这是第二个参数的值）：

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

当您使用此方法时，它将在所有屏幕上隐藏。

在你的情况下，它将看起来像这样：

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

答案 2

在 v4 上，只需在要隐藏标题的页面中使用以下代码

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

请参阅堆栈导航器