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

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

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

navigationOptions: { header: { visible: false } }

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


当前回答

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

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

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

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

其他回答

React原生导航v6.x 2022年5月

在屏幕选项道具中的headershows属性中设置false

        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen
            name="Home"
            component={Home}
            options={{ headerShown: false }}
          />
        </Stack.Navigator>
      

附: const Stack = createNativeStackNavigator()。

如果你的屏幕是一个类组件

static navigationOptions = ({ navigation }) => {
    return {
       header: () => null
    } 
}

在目标屏幕中将其编码为第一个方法(函数)。

v6

headerMode道具已从react导航6.x中移除。现在我们可以使用headershows选项来实现相同的结果。

<Stack.Navigator screenOptions={{ headerShown: false }}>
   {/* Your screens */}
</Stack.Navigator>

v5

在react导航5。你可以通过将Navigator的headerMode道具设置为false来隐藏所有屏幕的头部。

<Stack.Navigator headerMode={false}>
   {/* Your screens */}
</Stack.Navigator>

在V4上,你必须使用这个:

headerLeft: () => { }

这是不赞成的:

header: null

你只能在新的更新版本(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>
     }