如何使用 TabNavigation 在反应导航中显示标题 [英] how to display headers in react navigation with TabNavigation

问题描述

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

I noticed that views in StackNavigation show the header title but if I set those same screens in a TabNavigation it doesn't show a header. It only shows a header if I wrap a StackNavigation either around each tab, or wrap the TabNavigation nested inside a StackNavigation.

为什么 TabNavigation 中的屏幕不显示标题 - 这是预期的行为吗?如果是这样，在每个选项卡中都有一个 StackNavigation 还是在 TabNavigation 周围有一个大的 StackNavigation 更好?

Why don't screens in TabNavigation show a header - is that expected behavior? If so, is it better to have a StackNavigation in each tab, or one big StackNavigation around the TabNavigation?

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

// tabs navigation doesn't show a header title in each screen

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

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

Header shows when I wrap it in a 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,
        },
      },
    });

推荐答案

即使这是一个相当古老的问题，几天前我也遇到了这个问题，所以我会为此添加两分钱，希望这会将来也对其他人有用.

Even if this is a fairly old question, I had myself this question a couple days ago, so I'll be adding my two cents about it hoping this will be useful for someone else in the future as well.

React Navigation 是一款令人惊叹的产品，具有大量的自定义功能，但事实证明有时开始时也会令人困惑，这也适用于文档的某些部分.navigationOptions 截至当前版本状态，对于所有屏幕都是通用的，但可用导航选项列表取决于屏幕添加到的导航器".https://reactnavigation.org/docs/tab-navigator.html#navigationoptions-used-by-tabnavigator 因此 header 选项不起作用，因为它不适用于 TabNavigator 本身.

React Navigation is an amazing product with a high amount of customization, but that also turns out sometimes to be confusing to begin with, which also applies to some sections of the documentation. navigationOptions as of the current version states, is common for all screens but the "list of available navigation options depends on the navigator the screen is added to." https://reactnavigation.org/docs/tab-navigator.html#navigationoptions-used-by-tabnavigator hence the header option doesn't work because it's not available for TabNavigator itself.

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

Regarding your question on which approach is the best that depends on what do you want to accomplish with the navigation for your app itself. If you put your TabNavigator inside a StackNavigator the header component will be common for all of the tabs inside the TabNavigator, meaning the tab transition will take effect but the header won't move from its top position. If you on the other hand choose to nest a StackNavigator inside every tab, the header will render inside every tab, meaning the header will move along the tab transition animation.

我做了一个快速的演示让你看到不同之处，代码 如果你想玩的话也可以使用.

I made a quick demo for you to see the difference, the code is also available if you wanna play with it.

这篇关于如何使用 TabNavigation 在反应导航中显示标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！