[英]React-Navigation: Cannot hide header with nested navigators
I'm using the official react-navigation to handle my navigation. 我正在使用官方的反应导航来处理我的导航。 I have one main TabNavigator for the whole app with two tabs (called
HitchhikingMapNavigator
and SettingsNavigator
below), and each tab has a nested StackNavigator: 我有一个主要的TabNavigator用于整个应用程序,有两个选项卡(下面称为
HitchhikingMapNavigator
和SettingsNavigator
),每个选项卡都有一个嵌套的StackNavigator:
const HitchhikingMapNavigator = StackNavigator({
hitchhikingMap: { screen: HitchhikingMapViewContainer },
spotDetails: { screen: SpotDetailsViewContainer }
}, {
navigationOptions: {
header: {
visible: false
}
}
});
const SettingsNavigator = StackNavigator({
// some other routes
});
export default AppNavigator = TabNavigator({
hitchhikingMap: { screen: HitchhikingMapNavigator },
settings: { screen: SettingsNavigator }
}, {
navigationOptions: {
header: {
visible: false,
},
},
});
As you can see, I put the headers' visilibility to false everywhere, even in my HitchhikingMapViewContainer
's view: 正如您所看到的,即使在我的
HitchhikingMapViewContainer
视图中,我也将标题的可见性设置为虚假:
class HitchhikingMapView extends React.Component {
static navigationOptions = {
title: 'Map',
header: {
visible: false,
},
//...other options
}
And yet, the header bar is still visible: 然而,标题栏仍然可见:
If I don't nest the navigators (ie if I put this code, skipping the nested one): 如果我没有嵌套导航器(即,如果我放置此代码,跳过嵌套导航器):
export default AppNavigator = TabNavigator({
hitchhikingMap: { screen: HitchhikingMapViewContainer },
settings: { screen: SettingsNavigator }
});
then the header is correctly hidden. 然后标题被正确隐藏。
So conclusion: I can't make a header not visible when I have two nested navigators. 所以结论:当我有两个嵌套的导航器时,我无法使标题不可见。 Any ideas?
有任何想法吗?
For those who are still looking for the answer, I will post it here. 对于那些仍在寻找答案的人,我会在这里发布。
So two solutions: 两个解决方案:
1st solution: use headerMode: 'none'
in the StackNavigator. 第一个解决方案:在StackNavigator中使用
headerMode: 'none'
。 This will remove the header from ALL screens in the StackNavigator 这将删除StackNavigator中所有屏幕的标题
2nd solution: use headerMode: 'screen'
in the StackNavigator and add header: { visible: false }
in the navigationOptions
of the screens where you want to hide the header. 第二个解决方案:在StackNavigator中使用
headerMode: 'screen'
,并在要隐藏标题的屏幕的navigationOptions
中添加header: { visible: false }
。
More info can be found here: https://reactnavigation.org/docs/en/stack-navigator.html 更多信息可以在这里找到: https : //reactnavigation.org/docs/en/stack-navigator.html
Starting from v1.0.0-beta.9
, use the following, 从
v1.0.0-beta.9
,使用以下内容,
static navigationOptions = {
header: null
}
这对我有用:
headerMode: 'none'
I have the same problem in "react-navigation": "^3.0.9" . 我在“react-navigation”中遇到了同样的问题:“^ 3.0.9”。 What is the solution please ?
请问有什么解决方案?
My code : 我的代码:
const MontanteStack = createStackNavigator(
{
Montante: {
screen: MontanteTab,
navigationOptions: ({navigation}) => ({
header: null,
}),
},
PronosticsDetails: {
screen: PronosticsDetailsScreen,
navigationOptions: ({navigation}) => ({
headerMode: 'screen',
headerTitle: 'Pronostics détails',
headerStyle: {
backgroundColor: '#000000',
textAlign: 'center',
},
headerTintColor: '#ffffff',
headerTitleStyle: {
color: '#c7943e',
textAlign: 'center',
alignSelf: 'center',
justifyContent: 'center',
flex: 1,
}
}),
},
},
{
initialRouteName: 'Montante',
}
);
export default createAppContainer(MontanteStack);
I would like hide the the topbar and the tabs because they are displayed above the title of PronosticsDetailsScreen 我想隐藏顶部栏和标签,因为它们显示在PronosticsDetailsScreen的标题上方
This Worked for me, i am working on android side in react native version 0.45 这对我来说,我在反应原生版本0.45的android方面工作
static navigationOptions = {
header: null
}
This works for me to hide the navigation: 这对我隐藏导航很有用:
static navigationOptions = {
header: null
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.