Заголовки и опции экрана

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

Заголовок экрана

По умолчанию стек показывает в шапке name экрана. Чтобы задать понятный заголовок, используют опцию title.

import { createNativeStackNavigator } from "@react-navigation/native-stack";

const Stack = createNativeStackNavigator();

function Navigation() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: "Главная" }}
      />
    </Stack.Navigator>
  );
}

Цвета и стиль шапки

Шапку можно покрасить через несколько опций: фон, цвет текста и кнопок.

import { Stack } from "./stack";

const screenOptions = {
  headerStyle: { backgroundColor: "tomato" },
  headerTintColor: "white",
  headerTitleStyle: { fontWeight: "bold" },
};

Кнопка в шапке

Справа в шапку часто ставят кнопку — например, «Добавить» или «Сохранить». Это делается через headerRight, которому передают функцию-компонент.

import { Button } from "react-native";

const options = {
  headerRight: () => (
    <Button title="Сохранить" onPress={() => console.log("save")} />
  ),
};

Скрыть шапку

Иногда шапка не нужна (например, на экране входа). Её отключают одной опцией:

const options = { headerShown: false };

Динамический заголовок

Заголовок можно менять прямо из экрана — например, подставить имя пользователя. Для этого внутри компонента вызывают navigation.setOptions.

import { useEffect } from "react";
import { Text } from "react-native";

function ProfileScreen({ navigation, route }) {
  const { userName } = route.params;
  useEffect(() => {
    navigation.setOptions({ title: userName });
  }, [userName]);
  return <Text>Профиль</Text>;
}

Здесь заголовок шапки станет равен имени пользователя, переданному в параметрах.

Опции для всех экранов сразу

Когда нужно одинаково оформить шапку на всех экранах стека, не дублируйте опции на каждом Screen — задайте их один раз через screenOptions у навигатора. А отдельному экрану можно переопределить часть опций через его собственный options — он имеет приоритет.

import { createNativeStackNavigator } from "@react-navigation/native-stack";

const Stack = createNativeStackNavigator();

function Navigation() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: { backgroundColor: "tomato" },
        headerTintColor: "white",
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} options={{ title: "Главная" }} />
      <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
    </Stack.Navigator>
  );
}

Здесь все экраны получают красную шапку, но у экрана входа она вовсе скрыта — частная опция перекрыла общую.

Собираем опции — обычный JS

Опции экрана — обычный JS-объект. Покажем, как объединить общие и частные опции (запускаемый пример):

const common = { headerTintColor: "white" };
const screen = { title: "Профиль", headerShown: true };

const options = { ...common, ...screen };

console.log(options);

Вывод:

{ headerTintColor: 'white', title: 'Профиль', headerShown: true }

Итог

• title задаёт текст в шапке; headerStyle и headerTintColor красят её.
• headerRight добавляет кнопку, headerShown: false скрывает шапку.
• navigation.setOptions меняет заголовок и опции динамически из самого экрана.