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

Question

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

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

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

navigationOptions: { header: { visible: false } }

我在 stacknavigator 中使用的前两个组件上尝试此代码。

如果我使用此行，则会出现一些错误，例如：

原文由 Avijit Dutta 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

从版本 5 开始更新

从版本 5 开始，它是 screenOptions 中的选项 headerShown

使用示例：

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

原文由 Perry 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

参考 Stack Navigator

原文由 Dpkstr 发布，翻译遵循 CC BY-SA 4.0 许可协议