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 стеком и анимацијама.

Како функционише стек навигација

Стек навигација се заснива на принципу 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 стек унутар картице не утиче на друге картице.

// Угнежђени стек у 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>