React-Navigation:无法使用嵌套导航器隐藏标头

Question

我正在使用官方的反应导航来处理我的导航.我有一个主要的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,
    },
 },
});

正如你所看到的那样,即使在我看来,我也把标题的可见性放在了虚假的地方HitchhikingMapViewContainer:

class HitchhikingMapView extends React.Component {

  static navigationOptions = {
    title: 'Map',
    header: {
      visible: false,
    },
    //...other options
  }

然而,标题栏仍然可见:

如果我没有嵌套导航器(即,如果我放置此代码,跳过嵌套导航器):

export default AppNavigator = TabNavigator({
  hitchhikingMap: { screen: HitchhikingMapViewContainer },
  settings: { screen: SettingsNavigator }
});

然后标题被正确隐藏.

所以结论:当我有两个嵌套的导航器时,我无法使标题不可见.有任何想法吗？

Answer 1

对于那些仍在寻找答案的人,我会在这里发布.

两个解决方案:

第一个解决方案:headerMode: 'none'在StackNavigator中使用.这将删除StackNavigator中所有屏幕的标题

第二个解决办法:用headerMode: 'screen'在StackNavigator并添加header: { visible: false }在navigationOptions要隐藏标题屏幕.

更多信息可以在这里找到:https://reactnavigation.org/docs/en/stack-navigator.html

Answer 2

从v1.0.0-beta.9以下开始,使用以下内容,

static navigationOptions = {
    header: null
}