как отображать заголовки в режиме навигации с помощью TabNavigation

Я заметил, что представления в StackNavigation показывают заголовок заголовка, но если я установил те же самые экраны в TabNavigation, он не отобразит заголовок. Он отображает только заголовок, если я завершаю StackNavigation либо вокруг каждой вкладки, либо обертываю TabNavigation вложенным в StackNavigation.

Почему экраны в TabNavigation не показывают заголовок - это ожидаемое поведение? Если это так, лучше ли иметь StackNavigation на каждой вкладке или один большой StackNavigation вокруг TabNavigation?

//вкладка навигации не показывает заголовок заголовка на каждом экране

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

Ответ 1

Даже если это довольно старый вопрос, я задал себе этот вопрос пару дней назад, поэтому я буду добавлять свои два цента об этом, надеясь, что это будет полезно и для кого-то еще в будущем.

React Navigation - это удивительный продукт с большим количеством настроек, но это также иногда бывает запутанным, что также относится к некоторым разделам документации. navigationOptions как текущие состояния версии, является общим для всех экранов, но "список доступных параметров навигации зависит от навигатора, к которому добавлен экран". https://reactnavigation.org/docs/tab-navigator.html#navigationoptions-used-by-tabnavigator, поэтому параметр header не работает, потому что он недоступен для самого TabNavigator.

Что касается вашего вопроса о том, какой подход лучше всего зависит от того, что вы хотите выполнить с помощью навигации для своего приложения. Если вы разместите TabNavigator внутри StackNavigator компонент заголовка будет распространен для всех вкладок внутри TabNavigator, то есть переход на вкладку вступит в силу, но заголовок не будет перемещаться из верхней позиции. Если вы, с другой стороны, хотите StackNavigator в каждую вкладку, заголовок будет отображаться внутри каждой вкладки, то есть заголовок будет перемещаться по анимации перехода на вкладку.

Я сделал быструю демонстрацию для вас, чтобы увидеть разницу, код также доступен, если вы хотите поиграть с ним.

Ответ 2

Согласно React-Navigation TabNavigator Docs нет заголовка navigationOption. Поэтому, когда вы пишете следующий код, вы фактически устанавливаете несуществующее значение, таким образом, то, что вы делаете, не влияет ни на что.

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

К сожалению, в этой ситуации вам нужен StackNavigator.