我试图使用堆栈和选项卡导航器切换屏幕。
const MainNavigation = StackNavigator({
otp: { screen: OTPlogin },
otpverify: { screen: OTPverification},
userVerified: {
screen: TabNavigator({
List: { screen: List },
Settings: { screen: Settings }
}),
},
});
在这种情况下，首先使用堆栈导航器，然后使用制表器。我想从堆栈导航器中隐藏头文件。这是不正常工作时，我使用导航选项::
navigationOptions: { header: { visible: false } }
我试图在前两个组件上使用这段代码在stacknavigator。 如果我使用这一行，然后得到一些错误，如:
当前回答
我使用header: null而不是header: {visible: true}我使用react-native cli。例子如下:
static navigationOptions = {
header : null
};
其他回答
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,
};
尝试最好的方法，下面的代码适用于我。
options={{
headerShown: false,
}}
把上面的代码放在<Stack中。屏幕标签。
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="LogOut" component={LogOut} options={{ headerShown: false }} />
</Stack.Navigator>
</NavigationContainer>
<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”，
在V4上，你必须使用这个:
headerLeft: () => { }
这是不赞成的:
header: null
从版本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,
}
}
);
