React-Navigation：无法使用嵌套导航器隐藏标题

Question

我正在使用官方react-navigation 来处理我的导航。我有一个用于整个应用程序的主 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,
    },
 },
});

如您所见，我将标题的可见性设置为 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

对于那些还在寻找答案的人，我会在这里发布。

所以有两种解决方案：

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

第二个解决方案：在 StackNavigator 中使用 headerMode: 'screen' 并在要隐藏标题的屏幕的 navigationOptions 中添加 header: { visible: false }。

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

Answer 2

从v1.0.0-beta.9开始，使用如下，

static navigationOptions = {
    header: null
}

Answer 3

这对我有用，我在 android 方面工作，反应原生版本 0.45

static navigationOptions = {
    header: null
}

Answer 4

这对我来说可以隐藏导航：

static navigationOptions = {
    header: null
 };

Answer 5

这对我有用：

headerMode: 'none'