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

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

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

navigationOptions: { header: { visible: false } }

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


当前回答

对于单个屏幕,您可以在createStackNavigator中设置header:null或headershow: false,如下所示 const App = createStackNavigator({ 第一:{ 屏幕:回家, navigationOptions: { 标题:空, }, }, }); 使用defaultNavigationOptions一次从所有屏幕中隐藏头部 const App = createStackNavigator({ 第一:{ 屏幕:HomeActivity, }, }, { defaultNavigationOptions: { 标题:零 }, });

其他回答

为4。x, header: null已弃用,应该使用headershow: false代替

ex:

const AppScreens = createStackNavigator({
  cover: {
    screen: Login,
    path: '/login',
    navigationOptions: () => ({
      headerShown: false,
    }),
  },
})

对我来说,navigationOptions不起作用。下面的方法对我很有效。

<Stack.Screen name="Login" component={Login}
      options={{
               headerShown: false
              }}
     />
 <Stack.Screen
    name="SignInScreen"
    component={Screens.SignInScreen}
    options={{ headerShown: false }}
  />

options={{headershows: false}}为我工作。

** “@react-navigation/native”: “^5.0.7”, “@react-navigation/stack”: “^5.0.8”,

重要的是要将您使用的反应导航库版本与解决方案相匹配,因为它们都是不同的。对于那些因为某些原因还在使用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',
  }
);

所有的答案都展示了如何用类组件来实现,但是对于功能组件你需要做:

const MyComponent = () => {
    return (
        <SafeAreaView>
            <Text>MyComponent</Text>
        </SafeAreaView>
    )
}

MyComponent.navigationOptions = ({ /*navigation*/ }) => {
    return {
        header: null
    }
}

如果你删除了头部,你的组件可能在你看不到的地方(当手机没有方形屏幕时),所以在删除头部时使用它是很重要的。