Кнопки заголовков¶
Теперь, когда мы знаем, как настроить внешний вид наших заголовков, давайте сделаем их разумными! На самом деле, возможно, это амбициозно, давайте просто сделаем их способными реагировать на наши прикосновения очень четко определенными способами.
Добавление кнопки в заголовок¶
Наиболее распространенным способом взаимодействия с заголовком является нажатие на кнопку слева или справа от заголовка. Давайте добавим кнопку в правую часть заголовка (одно из самых труднодоступных мест на всем экране, в зависимости от размера пальца и телефона, но также и обычное место для размещения кнопок).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
Когда мы определяем кнопку таким образом, переменная this
в options
не является экземпляром HomeScreen
, поэтому вы не можете вызвать setState
или какие-либо методы экземпляра. Это очень важно, поскольку очень часто требуется, чтобы кнопки в заголовке взаимодействовали с экраном, которому принадлежит заголовок. Поэтому далее мы рассмотрим, как это сделать.
💡 Обратите внимание, что существует разработанная сообществом библиотека для отрисовки кнопок в заголовке с правильным стилем: react-navigation-header-buttons.
Взаимодействие заголовка с его экранным компонентом¶
В некоторых случаях компоненты в заголовке должны взаимодействовать с компонентом экрана. Для такого случая нам необходимо использовать navigation.setOptions
для обновления опций. Используя navigation.setOptions
внутри компонента экрана, мы получаем доступ к его реквизитам, состоянию, контексту и т.д.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
|
Здесь мы обновляем headerRight
с помощью кнопки с обработчиком onPress
, который имеет доступ к состоянию компонента и может его обновлять.
Настройка кнопки "Назад¶
Функция createNativeStackNavigator
предоставляет умолчания для кнопки "Назад" в зависимости от платформы. На iOS это включает в себя метку рядом с кнопкой, которая показывает заголовок предыдущего экрана, если он помещается в свободное пространство, в противном случае на ней написано "Назад".
Вы можете изменить поведение метки с помощью команды headerBackTitle
и придать ей стиль с помощью команды headerBackTitleStyle
(подробнее).
Для настройки изображения кнопки "Назад" можно использовать headerBackImageSource
(подробнее).
Переопределение кнопки "Назад¶
Кнопка "Назад" будет автоматически отображаться в стековом навигаторе при любой возможности возврата пользователя с текущего экрана — другими словами, кнопка "Назад" будет отображаться при наличии в стеке более одного экрана.
В общем случае это то, что нужно. Но возможно, что в некоторых обстоятельствах вы захотите настроить кнопку "Назад" больше, чем это можно сделать с помощью вышеупомянутых опций. В этом случае вы можете установить опцию headerLeft
для React-элемента, который будет отрисовываться, как мы это сделали с headerRight
. В качестве альтернативы опция headerLeft
также принимает React-компонент, который может быть использован, например, для переопределения поведения onPress кнопки "Назад". Подробнее об этом можно прочитать в api reference.
Резюме¶
- Вы можете настроить кнопки в заголовке через свойства
headerLeft
иheaderRight
вoptions
. - Кнопка "Назад" полностью настраивается с помощью
headerLeft
, но если вы хотите изменить только заголовок или изображение, то для этого есть другиеопции
—headerBackTitle
,headerBackTitleStyle
иheaderBackImageSource
. - Для доступа к объектам
navigation
иroute
можно использовать обратный вызов реквизита options.