Как добавить как панель поиска, так и кнопки вкладок в react-native с помощью react-navigation

введите здесь описание изображения

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

На этом экране у меня есть tabNavigator, содержащий вкладки для 5 экранов, похожий на тот, что показан на изображении выше. У него также есть заголовок с панелью поиска. Этот заголовок должен отображаться только на 4 из 5 вкладок, а на 5-й вкладке мне нужно отобразить другой заголовок.

Есть ли способ сделать это? Я знаю, что могу добавить представление на 4 из 5 вкладок, которые отображают один и тот же заголовок, и представление на 5-м экране, которое отображает другой заголовок, Но мне было интересно, есть ли способ сделать это без необходимости рендеринга. одно и то же представление на всех 4 вкладках снова и снова.

P.S. Должно работать как на iOS, так и на Android.


react-native react-navigation tabnavigator
person Chetan    schedule 15.07.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы можете настроить header из TabNavigator с помощью navigationOptions:

const TabNav = TabNavigator({
  First: { screen: FirstPage },
  Second: { screen: SecondPage },
  Third: { screen: ThirdPage },
  Fourth: { screen: FourthPage },
  Fifth: { screen: FifthPage }
}, {
  navigationOptions: {
    header: <SearchHeader />
  }
})

А затем пользовательский navigationOptions в FifthPage:

class FifthPage extends Component {
  static navigationOptions = {
    header: <FifthPageHeader />
  }
}

Я только что создал демонстрацию на Expo Snack: https://snack.expo.io/rJDGpmPHZ, 5-й экран имеет синий заголовок, а остальные - красный.

В документе TabNavigator по адресу https://reactnavigation.org/docs/navigators/tab#Screen-Navigation-Options, в нем нет опции header, я думаю, что она будет передана StackNavigator.

person Jacky Lee    schedule 15.07.2017
comment
Как вы передали заголовок в tabNavigator, если это невозможно. Я знаю, что это работает в навигаторе стека, но как вы это сделали в навигаторе вкладок? Я проверил ваш код для загруженной вами демонстрации, но когда я пытаюсь поместить заголовок в свой табнавигатор, он не работает должным образом. - person Chetan; 21.07.2017
comment
@Chetan, мне тоже интересно, как это сделать!! вы нашли решение! не могли бы вы проверить мой вопрос: stackoverflow.com /вопросы/46296119/ - person Yasir; 20.09.2017