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

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,
    },
 },
});

如您所见，我在所有地方都将 header 的可见性设置为 false，即使在我 HitchhikingMapViewContainer 的视图中也是如此：

class HitchhikingMapView extends React.Component {

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

然而，header 栏仍然可见：

如果我不嵌套导航器（即如果我放置此代码，跳过嵌套的）：

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

那么 header 就被正确隐藏了。

所以结论：当我有两个嵌套的导航器时，我无法使 header 不可见。有什么想法吗？

Answer 1

这对我有用：

headerMode: 'none'

Answer 2

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

所以两个解决方案：

第一个解决方案：在 StackNavigator 中使用 headerMode: 'none'。这将从 StackNavigator

的所有屏幕中删除 header

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

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

Answer 3

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

static navigationOptions = {
    header: null
}

Answer 4

这对我有用，我正在 android 方面的 React Native 版本 0.45

static navigationOptions = {
    header: null
}

Answer 5

我可以隐藏导航：

static navigationOptions = {
    header: null
 };

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

React-Navigation: Cannot hide header with nested navigators

javascript

react-native

react-navigation