Stack Navigator: что это, стековая навигация в React Native

Что такое Stack Navigator?

Stack Navigator — один из базовых навигаторов библиотеки React Navigation, реализующий стековую модель экранов. Он предоставляет привычную для мобильных пользователей навигацию: открытие нового экрана сопровождается анимацией выезда справа, а кнопка «Назад» или жест свайпа возвращает на предыдущий экран. Stack Navigator поддерживается на iOS и Android, используя нативные компоненты платформы для максимальной производительности.

React Navigation — самая популярная библиотека навигации для React Native, установленная в 85% проектов (по данным npm, 2026). Stack Navigator входит в её ядро и доступен в двух реализациях: createNativeStackNavigator (нативная, рекомендованная) и createStackNavigator (JavaScript, для сложных кастомных анимаций). Нативная версия появилась в React Navigation v5 и стала стандартом в v6+.

Основное преимущество Stack Navigator — естественное поведение, знакомое пользователям iOS и Android. На iOS стек визуально представлен UINavigationController, на Android — FragmentManager с анимацией slide. Разработчику не нужно реализовывать логику стека вручную — навигатор управляет состояниями экранов, back stack и анимациями автоматически.

Как работает стековая навигация

Стековая навигация основана на принципе LIFO (Last In, First Out). Когда пользователь открывает новый экран, навигатор помещает его на вершину стека. При нажатии «Назад» верхний экран удаляется, и пользователь видит предыдущий. Стек может содержать любое количество экранов — ограничение только по памяти устройства.

Каждый экран в стеке сохраняет своё состояние. При возврате на предыдущий экран его состояние восстанавливается автоматически. Это отличает стек от других типов навигации (Tab, Drawer), где экраны могут пересоздаваться. React Navigation управляет состоянием через собственный механизм навигационного контекста.

Жест свайпа для возврата

На iOS Stack Navigator поддерживает жест свайпа от левого края экрана для возврата — это стандартное поведение iOS, которое пользователи ожидают. На Android жест отключается по умолчанию, но его можно включить через опцию gestureEnabled. В Native Stack жест работает нативно, без задержек JavaScript-потока.

Native Stack против JS Stack

React Navigation предлагает два типа Stack Navigator: Native Stack (createNativeStackNavigator) и JS Stack (createStackNavigator). Основное различие — место выполнения анимации. Native Stack использует нативные драйверы анимации iOS и Android, тогда как JS Stack работает через JavaScript-поток React Native. Выбор между ними зависит от требований к производительности и кастомизации.

Native Stack рекомендован для большинства проектов. Он обеспечивает плавные 60 FPS анимации без блокировки JS-потока, поддерживает системный жест свайпа на iOS и использует нативные переходы — slide на iOS, fade на Android. Однако Native Stack ограничен в кастомизации анимаций: доступен только предопределённый набор переходов.

JS Stack даёт полный контроль над анимациями через cardStyleInterpolator. Разработчик может создать любую анимацию: масштабирование, вращение, параллакс, кастомные кривые. Минус — анимации работают в JS-потоке, что может вызывать дропы кадров на слабых устройствах при сложных переходах. Для 70% проектов Native Stack более чем достаточен.

// Native Stack — рекомендованная реализация
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string; name: string };
  Settings: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();

function AppNavigator() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: true }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

Установка и настройка Stack Navigator

Для начала работы с Stack Navigator необходимо установить React Navigation и его зависимости. Минимальный набор включает @react-navigation/native, @react-navigation/native-stack и react-native-screens. После установки приложение оборачивается в NavigationContainer — контекст, предоставляющий навигационное состояние всем дочерним компонентам.

# Установка зависимостей React Navigation
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# Для iOS — установка pod
cd ios && pod install && cd ..

После установки создаётся Stack.Navigator с определёнными экранами в RootStackParamList. Каждый экран связывается с React-компонентом через prop component. Навигатор может быть корневым или вложенным в другой навигатор (Tab, Drawer). Для настройки применяются screenOptions — общие для всех экранов или индивидуальные для каждого.

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

type RootStackParamList = {
  Home: undefined;
  Details: { itemId: number; title: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home"
        screenOptions={{
          headerStyle: { backgroundColor: '#6200ee' },
          headerTintColor: '#fff',
          gestureEnabled: true,
        }}>
        <Stack.Screen name="Home" component={HomeScreen}
          options={{ title: 'Главная' }} />
        <Stack.Screen name="Details" component={DetailsScreen}
          options={({ route }) => ({ title: route.params.title })} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Параметры и кастомизация Stack Navigator

Stack Navigator предоставляет множество опций для кастомизации внешнего вида и поведения. Основные параметры задаются через screenOptions на уровне Navigator или options на уровне Screen. Разработчик может настроить заголовок, анимацию перехода, жест свайпа, стиль карточки и затемнение фона. Гибкость настроек позволяет адаптировать навигацию под дизайн-систему приложения.

Кастомные анимации через cardStyleInterpolator

Для JS Stack cardStyleInterpolator позволяет создавать произвольные анимации переходов между экранами. Это мощный инструмент для реализации уникальных визуальных эффектов: масштабирование, вращение, параллакс, горизонтальный flip. Функция получает текущие значения прогресса анимации (current, next) и возвращает стили для анимируемых элементов.

Типизация навигации с TypeScript

Stack Navigator поддерживает полную типизацию через TypeScript. Для этого определяется RootStackParamList — тип-объект, где ключи — имена экранов, а значения — типы параметров. После типизации navigation.navigate и route.params получают автодополнение и проверку типов. Это исключает ошибки передачи параметров на этапе компиляции.

type RootStackParamList = {
  Home: undefined;
  Product: { id: string; category: string };
  Checkout: { items: CartItem[]; total: number };
};

// Типизированный экран
type ProductScreenProps = NativeStackScreenProps<RootStackParamList, 'Product'>;

function ProductScreen({ navigation, route }: ProductScreenProps) {
  const { id, category } = route.params;

  return (
    <View>
      <Text>Товар {id} — {category}</Text>
      <Button title="В корзину"
        onPress={() => navigation.navigate('Checkout', {
          items: [{ id, quantity: 1 }],
          total: 99.99,
        })} />
    </View>
  );
}

Продвинутые сценарии: модальные окна и группы

Stack Navigator поддерживает группировку экранов и модальные окна. Группы (Screen Group) позволяют применять общие настройки к нескольким экранам без дублирования. Модальные окна реализуются через stack presentation: 'modal' — экран открывается снизу с затемнением фона, как системный модал на iOS. Эта опция доступна только в Native Stack.

Для сложной навигации Stack Navigator может быть вложен в Tab Navigator или Drawer Navigator. Например, вкладка «Главная» содержит собственный стек экранов, а вкладка «Профиль» — свой. Такая композиция навигаторов — стандартный подход для production-приложений. Каждый стек изолирован: back stack внутри вкладки не влияет на другие вкладки.

// Вложенный стек в Tab Navigator
const HomeStack = createNativeStackNavigator<HomeStackParamList>();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Feed" component={FeedScreen} />
      <HomeStack.Screen name="PostDetail" component={PostDetailScreen}
        options={{ presentation: 'modal' }} />
    </HomeStack.Navigator>
  );
}

// Группы экранов с общими опциями
<Stack.Navigator>
  <Stack.Group screenOptions={{ headerShown: true }}>
    <Stack.Screen name="Main" component={MainScreen} />
    <Stack.Screen name="About" component={AboutScreen} />
  </Stack.Group>
  <Stack.Screen name="Auth" component={AuthScreen}
    options={{ presentation: 'modal', headerShown: false }} />
</Stack.Navigator>