Stack Navigator: mi ez, verem alapú navigáció a React Native-ban

Mi az a Stack Navigator?

Stack Navigator — a React Navigation könyvtár egyik alapvető navigátora, amely a képernyők veremmodelljét valósítja meg. Ismerős navigációt biztosít a mobil felhasználók számára: egy új képernyő megnyitását jobbról belépő animáció kíséri, a «Vissza» gomb vagy a húzás gesztus pedig visszaviszi a felhasználót az előző képernyőre. A Stack Navigator iOS-en és Androidon is támogatott, a platform natív komponenseit használva a maximális teljesítmény érdekében.

A React Navigation a legnépszerűbb navigációs könyvtár a React Native-hoz, a projektek 85%-ában telepítve (npm adatok szerint, 2026). A Stack Navigator a magjának része, és két implementációban érhető el: createNativeStackNavigator (natív, ajánlott) és createStackNavigator (JavaScript, összetett egyedi animációkhoz). A natív verzió a React Navigation v5-ben jelent meg, és a v6+-ban szabvánnyá vált.

A Stack Navigator fő előnye — természetes viselkedés, amely ismerős az iOS és Android felhasználók számára. iOS-en a verem vizuálisan UINavigationController-ként, Androidon FragmentManager-ként jelenik meg slide animációval. A fejlesztőnek nem kell manuálisan implementálnia a verem logikáját — a navigátor automatikusan kezeli a képernyőállapotokat, a back stack-et és az animációkat.

Hogyan működik a verem alapú navigáció

Verem alapú navigáció az LIFO (Last In, First Out) elven alapul. Amikor a felhasználó új képernyőt nyit meg, a navigátor a verem tetejére helyezi. A «Vissza» gomb megnyomásakor a felső képernyő eltávolításra kerül, és a felhasználó látja az előzőt. A verem tetszőleges számú képernyőt tartalmazhat — a korlát csak az eszköz memóriája.

A veremben lévő minden képernyő megőrzi állapotát. Az előző képernyőre visszatérve az állapot automatikusan helyreáll. Ez megkülönbözteti a vermet más navigációs típusoktól (Tab, Drawer), ahol a képernyők újra létrehozhatók. A React Navigation a saját navigációs kontextus mechanizmusán keresztül kezeli az állapotot.

Húzás gesztus a visszatéréshez

iOS-en a Stack Navigator támogatja a húzás gesztust a képernyő bal szélétől a visszatéréshez — ez az iOS szokásos viselkedése, amit a felhasználók elvárnak. Androidon a gesztus alapértelmezés szerint ki van kapcsolva, de a gestureEnabled opcióval bekapcsolható. A Native Stack-ben a gesztus natívan működik, a JavaScript szál késleltetése nélkül.

Native Stack kontra JS Stack

A React Navigation két típusú Stack Navigator-t kínál: Native Stack (createNativeStackNavigator) és JS Stack (createStackNavigator). A fő különbség az animáció végrehajtásának helye. A Native Stack az iOS és Android natív animációs meghajtóit használja, míg a JS Stack a React Native JavaScript szálán keresztül működik. A köztük lévő választás a teljesítmény- és testreszabási követelményektől függ.

Native Stack ajánlott a legtöbb projekt számára. Sima 60 FPS animációkat biztosít a JS szál blokkolása nélkül, támogatja a rendszer húzás gesztust iOS-en, és natív átmeneteket használ — slide iOS-en, fade Androidon. A Native Stack azonban korlátozott az animációk testreszabásában: csak előre meghatározott átmenetkészlet áll rendelkezésre.

JS Stack teljes kontrollt ad az animációk felett a cardStyleInterpolator segítségével. A fejlesztő bármilyen animációt létrehozhat: méretezés, forgatás, parallaxis, egyedi görbék. Hátrány — az animációk a JS szálon futnak, ami gyengébb eszközökön képkocka-kiesést okozhat összetett átmeneteknél. A projektek 70%-ához a Native Stack teljesen elegendő.

// Native Stack — ajánlott implementáció
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>
  );
}

A Stack Navigator telepítése és beállítása

A Stack Navigator használatának megkezdéséhez telepíteni kell a React Navigation-t és függőségeit. A minimális készlet tartalmazza a @react-navigation/native, @react-navigation/native-stack és react-native-screens csomagokat. Telepítés után az alkalmazás NavigationContainer-ba van csomagolva — egy kontextusba, amely navigációs állapotot biztosít az összes gyermekkomponensnek.

# React Navigation függőségek telepítése
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# iOS-hez — pod telepítése
cd ios && pod install && cd ..

Telepítés után létrejön a Stack.Navigator a RootStackParamList-ben meghatározott képernyőkkel. Minden képernyő a component prop segítségével kapcsolódik egy React komponenshez. A navigátor lehet gyökér vagy más navigátorba (Tab, Drawer) ágyazott. A konfigurációhoz screenOptions-t használunk — közöset az összes képernyőhöz vagy egyedit mindegyikhez.

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: 'Kezdőlap' }} />
        <Stack.Screen name="Details" component={DetailsScreen}
          options={({ route }) => ({ title: route.params.title })} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

A Stack Navigator paraméterei és testreszabása

Stack Navigator számos opciót kínál a megjelenés és viselkedés testreszabásához. A fő paraméterek a Navigator szintjén screenOptions vagy a Screen szintjén options segítségével állíthatók be. A fejlesztő konfigurálhatja a címet, az átmeneti animációt, a húzás gesztust, a kártya stílusát és a háttér sötétítését. A beállítások rugalmassága lehetővé teszi a navigáció alkalmazás dizájnrendszeréhez igazítását.

Egyedi animációk a cardStyleInterpolator segítségével

A JS Stack esetében a cardStyleInterpolator lehetővé teszi tetszőleges átmeneti animációk létrehozását a képernyők között. Ez egy hatékony eszköz egyedi vizuális effektek megvalósításához: méretezés, forgatás, parallaxis, vízszintes flip. A függvény megkapja az animáció aktuális előrehaladási értékeit (current, next), és stílusokat ad vissza az animált elemekhez.

Navigáció típusosítása TypeScript segítségével

Stack Navigator támogatja a teljes típusosítást TypeScript segítségével. Ehhez RootStackParamList kerül meghatározásra — egy típus-objektum, ahol a kulcsok képernyőnevek, az értékek pedig paramétertípusok. A típusosítás után a navigation.navigate és a route.params automatikus kiegészítést és típusellenőrzést kap. Ez kiküszöböli a paraméterátadási hibákat a fordítási fázisban.

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

// Típusosított képernyő
type ProductScreenProps = NativeStackScreenProps<RootStackParamList, 'Product'>;

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

  return (
    <View>
      <Text>Termék {id} — {category}</Text>
      <Button title="Kosárba"
        onPress={() => navigation.navigate('Checkout', {
          items: [{ id, quantity: 1 }],
          total: 99.99,
        })} />
    </View>
  );
}

Haladó forgatókönyvek: modális ablakok és csoportok

Stack Navigator támogatja a képernyők csoportosítását és a modális ablakokat. A csoportok (Screen Group) lehetővé teszik közös beállítások alkalmazását több képernyőre ismétlés nélkül. A modális ablakok a stack presentation: 'modal' segítségével valósulnak meg — a képernyő alulról nyílik meg a háttér sötétítésével, mint egy rendszermodál iOS-en. Ez az opció csak a Native Stack-ben érhető el.

Összetett navigációhoz a Stack Navigator beágyazható a Tab Navigator vagy Drawer Navigator-ba. Például a «Kezdőlap» fül saját képernyővermet tartalmaz, a «Profil» fül pedig a sajátját. A navigátorok ilyen kompozíciója a szokásos megközelítés a production alkalmazásokban. Minden verem izolált: a back stack az egyik fülen belül nem befolyásolja a többi fület.

// Beágyazott verem a Tab Navigator-ban
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>
  );
}

// Képernyőcsoportok közös opciókkal
<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>