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

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

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

navigationOptions: { header: { visible: false } }

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


当前回答

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

ex:

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

其他回答

只需将此添加到您的类/组件代码片段和Header将被隐藏

 static navigationOptions = { header: null }

如果你使用反应导航版本:6。X可以这样用。在这里,SignInScreen头将隐藏下面的代码片段

options={{  
   headerShown: false,  
}} 

完整的脚本应该是

import {createStackNavigator} from '@react-navigation/stack';  
import SignInScreen from '../screens/SignInscreen';  
import SignUpScreen from '../screens/SignUpScreen';  
const Stack = createStackNavigator();    
function MyStack() {  
 return (   
   <Stack.Navigator>   
     <Stack.Screen   
       name="Sing In"  
       component={SignInScreen}  
       options={{  
         headerShown: false,  
       }}   
     />  
     <Stack.Screen name="Sing Up" component={SignUpScreen} />   
   </Stack.Navigator>   
 );    
}  
export default function LoginFlowNavigator() {    
 return <MyStack />;   
}

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()。

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>

尝试最好的方法,下面的代码适用于我。

options={{
    headerShown: false,
}}

把上面的代码放在<Stack中。屏幕标签。

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