如何使用TabNavigation显示反应导航中的标题

Question

我注意到StackNavigation中的视图显示了标题标题，但是如果我在TabNavigation中设置了相同的屏幕，则它不会显示标题。如果我在每个选项卡周围包装StackNavigation，或者将TabNavigation包装在StackNavigation中，它只显示一个标题。

为什么TabNavigation中的屏幕不显示标题 - 这是预期的行为？如果是这样，在每个标签中有一个StackNavigation，或者在TabNavigation周围有一个大的StackNavigation吗？

//标签导航不会在每个屏幕中显示标题标题

const TabsNavigator = TabNavigator({
  Home: {
    screen:HomeScreen,
  },
  Profile: {
    screen: ProfileScreen,
  },
}, {
  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
  navigationOptions: {
    header: {
      visible: true,
    },
  },
});

当我将它包装在StackNavigator中时，标题显示

default StackNavigator({
  Home: { screen: TabsNavigator },
});

或者这样做更好

 export TabsNavigator = TabNavigator({
      Home: {
        screen:StackNavigator({
          Home: { screen: HomeScreen },
        }),
      },
      Profile: {
        screen: StackNavigator({Profile: {screen: ProfileScreen}}),
      },
    }, {
      tabBarOptions: {
        activeTintColor: '#e91e63',
      },
      navigationOptions: {
        header: {
          visible: true,
        },
      },
    });

Answer 1

即使这是一个相当古老的问题，我几天前也有这个问题，所以我将加上我的两分钱，希望这对未来的其他人也有用。

React Navigation是一个具有大量自定义功能的惊人产品，但有时候开始时也会引起混淆，这也适用于文档的某些部分。 navigationOptions截至当前版本状态，对于所有屏幕都很常见，但“可用导航选项列表取决于添加屏幕的导航器。” https://reactnavigation.org/docs/tab-navigator.html#navigationoptions-used-by-tabnavigator因此header选项不起作用，因为它不适用于TabNavigator本身。

关于哪种方法最好的问题取决于您希望通过应用程序本身的导航完成什么。如果你将TabNavigator放在StackNavigator中，那么标题组件对于TabNavigator中的所有选项卡都是通用的，这意味着标签转换将生效但标题不会从其顶部位置移动。另一方面，如果您选择在每个选项卡中嵌套StackNavigator，则标题将在每个选项卡内呈现，这意味着标题将沿着选项卡过渡动画移动。

我做了一个快速的demo让你看到差异，如果你想玩它，code也可用。

Answer 2

根据React-Navigation TabNavigator Docs，没有标题navigationOption。因此，当您编写以下代码时，实际上是在设置一个不存在的值，因此您所做的事情不会影响任何内容。

navigationOptions: {
  header: { visible: true },
}

可悲的是，在这种情况下你需要一个StackNavigator。