我试图使用堆栈和选项卡导航器切换屏幕。
const MainNavigation = StackNavigator({
otp: { screen: OTPlogin },
otpverify: { screen: OTPverification},
userVerified: {
screen: TabNavigator({
List: { screen: List },
Settings: { screen: Settings }
}),
},
});
在这种情况下，首先使用堆栈导航器，然后使用制表器。我想从堆栈导航器中隐藏头文件。这是不正常工作时，我使用导航选项::
navigationOptions: { header: { visible: false } }
我试图在前两个组件上使用这段代码在stacknavigator。 如果我使用这一行，然后得到一些错误，如:
当前回答
使用最新的react-navigation-stack v4，您可以使用它隐藏头文件
import { createStackNavigator } from 'react-navigation-stack';
createStackNavigator({
stackName: {
screen:ComponentScreenName,
navigationOptions: {
headerShown:false
}
}
})
其他回答
/*...*/
import { createNativeStackNavigator } from "@react-navigation/native-stack";
/*...*/
const {Navigator, Screen } =createNativeStackNavigator();
export function AuthRoutes(){
return (
<Navigator
screenOptions={
{
contentStyle:{
backgroundColor: 'transparent'
},
headerShown: false
}
}
>
</Navigator>
)
}
<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”，
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>
const CallStack = createStackNavigator({
Calls: Calls,
CallsScreen:CallsScreen,
}, {headerMode: 'none'});
CallStack.navigationOptions = {
tabBarLabel: 'Calls',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
/>
),
header: null,
headerVisible: false,
};
只需将此添加到您的类/组件代码片段和Header将被隐藏
static navigationOptions = { header: null }
