隐藏堆栈导航React导航头

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

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

在这种情况下，首先使用堆栈导航器，然后使用制表器。我想从堆栈导航器中隐藏头文件。这是不正常工作时，我使用导航选项::

navigationOptions: { header: { visible: false } }

我试图在前两个组件上使用这段代码在stacknavigator。如果我使用这一行，然后得到一些错误，如:

当前回答

const MyNavigator = createStackNavigator({
  FirstPage: {screen : FirstPageContainer, navigationOptions: { headerShown:false } },
  SecondPage: {screen : SecondPageContainer, navigationOptions: { headerShown: false } }
});

//header:null will be removed from upcoming versions

2020-02-02 18:58:17

其他回答

从版本5开始更新

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

用法示例:

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

如果你只想在一个屏幕上隐藏头部，你可以通过在屏幕组件上设置screenOptions来做到这一点，如下所示:

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

请参见关于版本5的博客

更新从版本2.0.0-alpha.36开始(2019-11-07), 有一个新的navigationOption: headershows

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

2017-06-22 13:49:58

重要的是要将您使用的反应导航库版本与解决方案相匹配，因为它们都是不同的。对于那些因为某些原因还在使用react-navigation v1.0.0的人来说，这两种方法都有效:

在个别屏幕上禁用/隐藏头信息:

const AppScreens = StackNavigator(
  {
    Main: { screen: Main, navigationOptions: { header: null } },
    Login: { screen: Login },
    Profile: { screen: Profile, navigationOptions: { header: null } },
  });

禁用/隐藏所有屏幕一次，使用这个:

const AppScreens = StackNavigator(
  {
    Main: { screen: Main},
    Login: { screen: Login },
    Profile: { screen: Profile },
  },
  {
    headerMode: 'none',
  }
);

2020-05-11 06:02:52

const MyNavigator = createStackNavigator({
  FirstPage: {screen : FirstPageContainer, navigationOptions: { headerShown:false } },
  SecondPage: {screen : SecondPageContainer, navigationOptions: { headerShown: false } }
});

//header:null will be removed from upcoming versions

2020-02-02 18:58:17

在react-navigation的最新版本中，这可以在每个屏幕上隐藏标题:

<堆栈。领航员 headerMode ={“郎”} > <堆栈。屏幕 <堆栈。屏幕名 < /堆栈。领航员>

2020-06-21 22:40:52

你只能在新的更新版本(react- navigation版本6)中使用headerperformed:false

import { createStackNavigator } from '@react-navigation/stack';
    const Util = createStackNavigator();
    const UtilStack = () =>{
        return(
            <Util.Navigator>
                <Util.Screen name='Splash' component={Splash} options={{ headerShown: false }}/>
            )
            <Util.Navigator>
     }

2022-05-02 10:19:45

隐藏堆栈导航React导航头

推荐文章

最新文章

标签