Перейти к основному содержимому

Header buttons

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

Добавление кнопки в заголовок​

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

const screenOptions = {
  headerTitle: props => <LogoTitle />,
  headerRight: () => (
    <Button
      onPress={() => console.log('This is a button!')}
      title="Info"
      color="#fff"
    />
  ),
};

const StackScreen = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={screenOptions}
      />
    </Stack.Navigator>
  );
}

Попробуйте этот пример на Snack

Когда мы определяем нашу кнопку таким образом, переменная this в параметрах options не является экземпляром HomeScreen, поэтому вы не можете вызывать setState или какие-либо методы экземпляра на нем. Это очень важно, потому что очень часто требуется, чтобы кнопки в вашем заголовке взаимодействовали с экраном, которому принадлежит заголовок. Итак, мы посмотрим, как это сделать дальше.

Взаимодействие заголовка с его экранным компонентом​

Чтобы иметь возможность взаимодействовать с компонентом экрана, нам нужно использовать navigation.setOptions для определения нашей кнопки вместо свойства options. Используя navigation.setOptions внутри компонента экрана, мы получаем доступ к свойствам экрана, состоянию, контексту и т.д.

const StackScreen = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={({ navigation, route }) => ({
          headerTitle: props => <LogoTitle />
        })}
      />
    </Stack.Navigator>
  )
}

const HomeScreen = ({ navigation }) => {
  const [count, setCount] = React.useState(0)

  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Button onPress={() => setCount(c => c + 1)} title="Update count" />
      ),
    })
  }, [navigation])

  return <Text>Count: {count}</Text>
}

Настройка кнопки возврата​

createStackNavigator предоставляет настройки по умолчанию для конкретной платформы для кнопки возврата. В iOS это включает лейбл с кнопкой, которая показывает заголовок предыдущего экрана, когда заголовок помещается в доступное пространство, в противном случае он говорит «Назад».

Вы можете изменить поведение метки с помощью headerBackTitle и headerTruncatedBackTitle подробнее.

Чтобы настроить изображение кнопки «Назад», вы можете использовать headerBackImage.

Переопределение кнопки возврата​

Кнопка «Назад» будет автоматически отображаться в навигаторе стека всякий раз, когда у пользователя есть возможность вернуться с текущего экрана - другими словами, кнопка «Назад» будет отображаться всякий раз, когда в стеке больше одного экрана.

В общем, это то, что вам нужно. Но возможно, что в некоторых обстоятельствах вы захотите настроить кнопку «Назад» больше, чем вы можете с помощью опций, упомянутых выше, и в этом случае вы можете установить опцию headerLeft для элемента React, который будет отображаться, так же, как мы это делали с headerRight. В качестве альтернативы, опция headerLeft также принимает компонент React, который может использоваться, например, для переопределения поведения onPress кнопки возврата. Подробнее об этом читайте в справке по API.

Если вы хотите сохранить вид кнопки «Назад» и переопределить только метод onPress, вы можете импортировать HeaderBackButton из @react-navigation/stack 

import { HeaderBackButton } from '@react-navigation/stack'

и назначьте этот компонент параметру headerLeft.

Done​

Чтобы узнать, насколько хорошо вы усвоили этот урок, пройдите тест в мобильном приложении нашей школы по этой теме или в боте Telegram.

EnglishMoji!

React Navigation

Contributors ✨​

Thanks goes to these wonderful people (emoji key):


Dmitriy Vasilev
💲

EnglishMoji!