навигация - react-native-router-flux npm




как отображать заголовки в реагирующей навигации с TabNavigation (2)

Я заметил, что представления в 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,
        },
      },
    });

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

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

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


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

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

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

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





react-navigation