如何使用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在每个选项卡内嵌套,则标题将在每个选项卡内呈现,这意味着标题将沿着选项卡过渡动画移动.

我做了一个快速演示,让你看到差异,代码也可用,如果你想玩它.