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

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

两个解决方案：

第一个解决方案：在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

这对我有用：

headerMode: 'none'

Answer 4

我在“react-navigation”中遇到了同样的问题：“^ 3.0.9”。 请问有什么解决方案？

我的代码：

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

我想隐藏顶部栏和标签，因为它们显示在PronosticsDetailsS​​creen的标题上方

Answer 5

这对我来说，我在反应原生版本0.45的android方面工作

static navigationOptions = {
    header: null
}

Answer 6

这对我隐藏导航很有用：

static navigationOptions = {
    header: null
 };