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>