我正在尝试使用堆栈和选项卡导航器切换屏幕.
I'm trying to switch screens using both stack and tab navigator.
const MainNavigation = StackNavigator({
otp: { screen: OTPlogin },
otpverify: { screen: OTPverification},
userVerified: {
screen: TabNavigator({
List: { screen: List },
Settings: { screen: Settings }
}),
},
});
在这种情况下,首先使用堆栈导航器,然后使用选项卡导航器.我想从堆栈导航器中隐藏标题.当我使用以下导航选项时,哪个无法正常工作::
In this case stack navigator is used first and then tab navigator. I want to hide the headers from stack navigator. Which is not working properly when I use navigation options like::
navigationOptions: { header: { visible: false } }
我正在堆栈导航器中使用的前两个组件上尝试此代码.如果我使用此行,则会出现一些错误,例如:
i'm trying this code on first two components which are using in stacknavigator. if i use this line then getting some error like:
更新至版本 5
从版本 5 开始,它是 screenOptions
As of version 5 it is the option headerShown
in screenOptions
使用示例:
<Stack.Navigator
screenOptions={{
headerShown: false
}}
>
<Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>
如果您只想在 1 个屏幕上隐藏标题,您可以通过在屏幕组件上设置 screenOptions 来实现此目的,例如:
If you want only to hide the header on 1 screen you can do this by setting the screenOptions on the screen component see below for example:
<Stack.Screen options={{headerShown: false}} name="route-name" component={ScreenComponent} />
另请参阅关于第 5 版的博客
See also the blog about version 5
更新
从版本 2.0.0-alpha.36 (2019-11-07) 开始,
有一个新的导航选项:headershown
navigationOptions: {
headerShown: false,
}
https://reactnavigation.org/docs/stack-navigator#headershown
https://github.com/react-navigation/react-navigation/提交/ba6b6ae025de2d586229fa8b09b9dd5732af94bd
旧答案
我用它来隐藏堆栈栏(注意这是第二个参数的值):
I use this to hide the stack bar (notice this is the value of the second param):
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
}
当您使用此方法时,它将在所有屏幕上隐藏.
When you use the this method it will be hidden on all screens.
在你的情况下,它看起来像这样:
In your case it will look like this:
const MainNavigation = StackNavigator({
otp: { screen: OTPlogin },
otpverify: { screen: OTPverification },
userVerified: {
screen: TabNavigator({
List: { screen: List },
Settings: { screen: Settings }
}),
}
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
}
);
这篇关于在堆栈导航器中隐藏标题 React 导航的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!