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. Например, разделът «Начало» съдържа собствен стек от екрани, а разделът «Профил» — свой. Такава композиция от навигатори е стандартният подход за производствени приложения. Всеки стек е изолиран: 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>