Стек экранов и шапка

Стек (stack) — основной вид навигации на телефоне. Новый экран кладётся поверх предыдущего, а кнопка «назад» снимает его и возвращает к прошлому. Стек и шапку с заголовком настраивают в файле макета app/_layout.tsx.

Макет со стеком

После npm run reset-project макет уже содержит стек:

// app/_layout.tsx
import { Stack } from 'expo-router';
 
export default function RootLayout() {
  return <Stack />;
}

Stack показывает текущий экран и шапку над ним. Экраны из папки app становятся частью стека автоматически, а заголовком шапки служит имя файла: index, about.

Заголовки и оформление шапки

Заголовки и общий вид задают в макете:

// app/_layout.tsx
import { Stack } from 'expo-router';
 
export default function RootLayout() {
  return (
    <Stack
      screenOptions={{
        headerStyle: { backgroundColor: '#2563eb' },
        headerTintColor: '#fff',
      }}
    >
      <Stack.Screen name="index" options={{ title: 'Блог' }} />
      <Stack.Screen name="about" options={{ title: 'О приложении' }} />
    </Stack>
  );
}

Шапка станет синей с белым текстом, а заголовки — «Блог» и «О приложении». screenOptions действует на все экраны, options у Stack.Screen — на один; name — путь к файлу без расширения.

Заголовок из самого экрана

Если заголовок зависит от данных экрана, его задают внутри экрана, выводя Stack.Screen в разметке:

// app/about.tsx
import { Stack } from 'expo-router';
import { Text, View } from 'react-native';
 
export default function About() {
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Stack.Screen options={{ title: 'Об авторах' }} />
      <Text>Приложение написали Анна и Олег.</Text>
    </View>
  );
}

На экране ничего лишнего не появится, а в шапке будет «Об авторах».

Переход из кода

Иногда переход нужен не по ссылке, а после действия — например, после сохранения формы. Для этого есть хук useRouter:

// app/index.tsx
import { useRouter } from 'expo-router';
import { Button, View } from 'react-native';
 
export default function Index() {
  const router = useRouter();
 
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Button title="О приложении" onPress={() => router.push('/about')} />
    </View>
  );
}

Нажатие на кнопку откроет экран «О приложении» поверх главного.

Частая ошибка

Указывать в Stack.Screen имя, которого нет среди файлов: name="About" при файле about.tsx. Имена чувствительны к регистру, поэтому настройки не применятся, а в терминале появится предупреждение. name должен совпадать с путём файла внутри app без расширения: about, posts/[id].