10

我正在使用官方的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 }
});

然后标题被正确隐藏。

所以结论：当我有两个嵌套导航器时，我不能使标题不可见。有任何想法吗？

4

5 回答 5

18

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

所以有两个解决方案：

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

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

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

于 2017-04-05T12:23:27.607 回答
10

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

static navigationOptions = {
    header: null
}
于 2017-05-30T02:50:56.587 回答
2

这对我有用：

headerMode: 'none'
于 2017-02-24T19:49:00.533 回答
0

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

static navigationOptions = {
    header: null
 };
于 2017-08-09T08:03:45.083 回答
0

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

static navigationOptions = {
    header: null
}
于 2017-06-13T20:53:41.357 回答