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

Настройка Header

Мы уже видели, как настроить title в Header, но давайте еще раз рассмотрим это, прежде чем перейти к некоторым другим параметрам - повторение является ключом к обучению!

Настроить title в Header​

Компонент Screen принимает опцию options, которая является либо объектом, либо функцией, возвращающей объект, содержащий различные параметры конфигурации. В качестве заголовка мы используем title, как показано в следующем примере.

const StackScreen = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }}
      />
    </Stack.Navigator>
  )
}

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

Использование параметров в заголовке​

Чтобы использовать параметры в заголовке, нам нужно сделать опцию options для экрана функцией, которая возвращает объект конфигурации. Может возникнуть соблазн попробовать использовать this.props внутри параметров, но поскольку он определен до рендеринга компонента, это не относится к экземпляру компонента, и поэтому свойства недоступны. Вместо этого, если мы сделаем параметры функцией, тогда React Navigation вызовет ее с объектом, содержащим {navigation, route} - в этом случае все, о чем мы заботимся, это маршрут, который является тем же объектом, который передается в свойства вашего экрана в качестве свойства маршрута. Вы можете вспомнить, что мы можем получить параметры через route.params, и поэтому мы делаем это ниже, чтобы извлечь параметр и использовать его в качестве заголовка.

import * as React from 'react'
import { View, Text, Button } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

const HomeScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Home Screen</Text>
    <Button title="Go to Details" onPress={() => navigation.navigate('Detail', { name: 'Custom details header' })} />
  </View>
)

const DetailScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Profile screen</Text>
    <Button title="Go back" onPress={() => navigation.goBack()} />
  </View>
)

const Stack = createStackNavigator()

const App = () => (
  <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'My home' }} />
      <Stack.Screen name="Detail" component={DetailScreen} options={({ route }) => ({ title: route.params.name })} />
    </Stack.Navigator>
  </NavigationContainer>
)

export default App

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

Аргумент, который передается в функцию параметров, представляет собой объект со следующими свойствами:

  • navigation - prop для экрана
  • route - prop маршрута для экрана

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

Обновление параметров с помощью setOptions​

Часто бывает необходимо обновить конфигурацию опций для активного экрана из самого подключенного компонента экрана. Мы можем сделать это с помощью navigation.setOptions

/* Внутри render() или React class */
<Button
  title="Update the title"
  onPress={() => navigation.setOptions({ title: 'Updated!' })}
/>

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

Настройка стилей​

При настройке стиля хедера следует использовать три ключевых свойства: headerStyle, headerTintColor и headerTitleStyle.

  • headerStyle: объект стиля, который будет применен к View, которое обертывает заголовок. Если вы установите для него backgroundColor, это будет цвет вашего заголовка.
  • headerTintColor: кнопка «Назад» и заголовок используют это свойство в качестве цвета. В приведенном ниже примере мы устанавливаем белый цвет оттенка #fff, поэтому кнопка «Назад» и заголовок заголовка будут белыми.
  • headerTitleStyle: если мы хотим настроить fontFamily, fontWeight и другие свойства стиля текста для заголовка, мы можем использовать это для этого.

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

header

Здесь следует отметить несколько моментов:

  • В iOS текст строки состояния и значки черные, и это не очень хорошо смотрится на темном фоне. Мы не будем обсуждать это здесь, но вы должны обязательно настроить строку состояния в соответствии с цветами экрана, как описано в руководстве по строке состояния.
  • Установленная нами конфигурация применяется только к главному экрану; когда мы переходим к экрану подробностей, стили по умолчанию возвращаются. Теперь мы рассмотрим, как разделить параметры options между экранами.

Совместное использование общих параметров на разных экранах​

Часто возникает желание настроить заголовок аналогичным образом на многих экранах. Например, цвет бренда вашей компании может быть красным, поэтому вы хотите, чтобы цвет фона заголовка был красным, а цвет оттенка был белым. Для удобства это цвета, которые мы используем в нашем текущем примере, и вы заметите, что при переходе на экран DetailsScreen цвета возвращаются к значениям по умолчанию. Разве не было бы ужасно, если бы нам пришлось скопировать свойства стиля заголовка параметров из HomeScreen в DetailsScreen и для каждого отдельного компонента экрана, который мы используем в нашем приложении? К счастью, нет. Вместо этого мы можем переместить конфигурацию в навигатор стека в разделе prop screenOptions.

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

Теперь любой экран, принадлежащий StackScreen, будет иметь наши замечательные фирменные стили. Конечно, должен быть способ переопределить эти параметры, если нам нужно?

Замена заголовка на кастомный компонент​

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

const LogoTitle = () => {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('@expo/snack-static/react-native-logo.png')}
    />
  );
}

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

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

Вам может быть интересно, почему headerTitle, когда мы предоставляем компонент, а не title, как раньше? Причина в том, что title - это свойство, специфичное для навигатора стека, а headerTitle по умолчанию - это компонент Text, который отображает title.

Дополнительная конфигурация​

Вы можете прочитать полный список доступных опций для экранов внутри навигатора стека в справочнике createStackNavigator.

Done​

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

EnglishMoji!

React Navigation

Contributors ✨​

Thanks goes to these wonderful people (emoji key):


Dmitriy Vasilev
💲

EnglishMoji!