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

正如你所看到的，即使在我的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'，并在要隐藏标题的屏幕的header: { visible: false }中添加navigationOptions。

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

Answer 2

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

static navigationOptions = {
    header: null
}

Answer 3

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

static navigationOptions = {
    header: null
}

Answer 4

这对我隐藏导航很有用：

static navigationOptions = {
    header: null
 };

Answer 5

我在“反应导航”中存在相同的问题：“ ^ 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);

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

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

5 个答案: