React Navigation v7 Teljes Útmutató (2026): Stack, Tab és Drawer TypeScript-tel

Mi az a React Navigation v7 és miért válaszd?

A React Navigation a legszélesebb körben használt navigációs könyvtár React Native alkalmazásokhoz — és őszintén szólva, nem véletlenül. A 2024 novemberében kiadott 7.0-s verzió fundamentális újításokat hozott: bevezette a statikus API-t, amellyel a TypeScript típusok és a deep linking konfiguráció automatikusan generálható a navigációs struktúrából. Ez megszünteti az egyik legnagyobb fejlesztői fájdalompontot: a navigációs konfiguráció és a típusdefiníciók kézi szinkronizálását. (Ha ez valaha is fájt neked, tudod, miről beszélek.)

A React Navigation v7 alapértelmezés szerint natív alsó lapokat kínál iOS-en és Androidon, integrálja a react-native-screens könyvtárat a teljesítmény maximalizálása érdekében, és teljes mértékben kompatibilis a React Native Új Architektúrájával. Ha Expo SDK 55-öt vagy React Native 0.76+-t használsz, ez a verzió a de facto szabvány. Szóval, vágjunk bele!

Telepítés és alapkonfiguráció

Először is, telepítsük a szükséges csomagokat. Expo projekthez ez elég egyszerű:

npx expo install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context

Alap React Native projekthez (0.76+):

npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

Fontos lépés: csomagold be az alkalmazás gyökerét a SafeAreaProvider-be, és engedélyezd a natív képernyőket:

import { enableScreens } from 'react-native-screens';
import { SafeAreaProvider } from 'react-native-safe-area-context';

enableScreens();

export default function App() {
  return (
    <SafeAreaProvider>
      <Navigation />
    </SafeAreaProvider>
  );
}

Az enableScreens() hívással a háttérben lévő képernyők valódi natív nézetekké válnak, amelyek 0% CPU-t és minimális memóriát fogyasztanak. Ez különösen fontos komplex navigációs struktúráknál — és hidd el, ez a különbség a gyors és a lassú app között.

Statikus API vs Dinamikus API

A React Navigation v7 két API-t kínál — és ez az egyik pont, ahol érdemes megállni egy percre.

A dinamikus API az előző verziókból ismert, ahol a navigátorokat React komponensként definiálod JSX-ben. A statikus API az újabb, ajánlott megközelítés, ahol a navigációs struktúrát konfigurációs objektumban definiálod. Ennek fő előnye: a TypeScript típusok és a deep linking konfiguráció automatikusan generálódik — nem kell manuálisan karbantartani őket. Nézzük, hogyan néz ez ki a gyakorlatban.

Stack Navigátor TypeScript-tel (Static API)

A stack (verem) navigátor a legalapvetőbb navigációs minta: az új képernyők egymásra kerülnek, mint egy kártyapakli. Legtöbb React Native app itt kezdi.

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createStaticNavigation } from '@react-navigation/native';
import type { StaticParamList, StaticScreenProps } from '@react-navigation/native';

// Képernyő komponensek
type HomeProps = StaticScreenProps<undefined>;
type ProfileProps = StaticScreenProps<{ userId: string; name: string }>;

function HomeScreen({ navigation }: HomeProps) {
  return (
    <Button
      title="Profil megtekintése"
      onPress={() => navigation.navigate('Profile', { userId: '42', name: 'Kovács Péter' })}
    />
  );
}

function ProfileScreen({ route }: ProfileProps) {
  const { userId, name } = route.params;
  return <Text>{name} (ID: {userId})</Text>;
}

// Navigátor definíció
const RootStack = createNativeStackNavigator({
  screenOptions: {
    animation: 'slide_from_right',
    headerBackButtonMenuEnabled: false,
  },
  screens: {
    Home: {
      screen: HomeScreen,
      options: { title: 'Főoldal' },
    },
    Profile: {
      screen: ProfileScreen,
      options: ({ route }) => ({ title: route.params.name }),
    },
  },
});

// Globális típusok — egyszer definiálod, mindenhol elérhető
declare global {
  namespace ReactNavigation {
    interface RootParamList extends StaticParamList<typeof RootStack> {}
  }
}

export const Navigation = createStaticNavigation(RootStack);

A StaticParamList automatikusan kinyeri a paramétertípusokat a konfigurációból. Ezután a useNavigation() hook típusbiztos lesz az egész alkalmazásban — anélkül, hogy minden komponensben manuálisan kellene megadni a típusokat. Ez önmagában megér egy verziófrisítést.

Tab Navigátor (Alsó Lapok)

Az alsó lapok navigátor a leggyakoribb mobil navigációs minta. Szinte minden fogyasztói app tartalmaz ilyet. Telepítsd a csomagot:

npm install @react-navigation/bottom-tabs

Teljes konfiguráció ikonokkal:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from '@expo/vector-icons/Ionicons';

const TabNavigator = createBottomTabNavigator({
  screenOptions: ({ route }) => ({
    tabBarIcon: ({ focused, color, size }) => {
      const icons: Record<string, string> = {
        Home: focused ? 'home' : 'home-outline',
        Search: focused ? 'search' : 'search-outline',
        Profile: focused ? 'person' : 'person-outline',
      };
      return <Ionicons name={icons[route.name] as any} size={size} color={color} />;
    },
    tabBarActiveTintColor: '#6200ee',
    tabBarInactiveTintColor: 'gray',
    tabBarStyle: { paddingBottom: 4 },
  }),
  screens: {
    Home: { screen: HomeScreen, options: { title: 'Kezdőlap' } },
    Search: { screen: SearchScreen, options: { title: 'Keresés' } },
    Profile: { screen: ProfileScreen, options: { title: 'Profil' } },
  },
});

Native Bottom Tabs — Platformhű megjelenés

A React Navigation v7 egyik legjelentősebb újítása a natív alsó lapok támogatása. iOS-en a SwiftUI TabView, Androidon a BottomNavigationView natív komponenseket használja — ez azt jelenti, hogy az alkalmazás pontosan úgy néz ki, ahogy az operációs rendszer elvárja.

npm install react-native-bottom-tabs

import { createNativeBottomTabNavigator } from 'react-native-bottom-tabs';

const NativeTabNavigator = createNativeBottomTabNavigator({
  screens: {
    Home: {
      screen: HomeScreen,
      options: {
        title: 'Kezdőlap',
        tabBarIcon: () => ({ sfSymbol: 'house', fallback: require('./assets/home.png') }),
      },
    },
    Settings: {
      screen: SettingsScreen,
      options: {
        title: 'Beállítások',
        tabBarIcon: () => ({ sfSymbol: 'gear', fallback: require('./assets/settings.png') }),
      },
    },
  },
});

iOS-en az sfSymbol a natív SF Symbols rendszerből veszi az ikont, míg Androidon a fallback képet használja. Ez a megközelítés valódi platformhű megjelenést eredményez minimális kóddal. A natív bottom tabs integráció közvetlen kapcsolatban áll a React Native Új Architektúrájával — ha többet szeretnél tudni az Expo SDK 55 és az Új Architektúra kapcsolatáról, érdemes elolvasni az erről szóló útmutatónkat.

Drawer Navigátor

A drawer (fiókos) navigátor egy oldalsó menüt biztosít, amelyet gesztussal vagy programmatikusan lehet megnyitni. Kiválóan alkalmas tartalom-gazdag appokhoz, ahol sok menüpontot kell elrejteni.

npm install @react-navigation/drawer
npm install react-native-gesture-handler react-native-reanimated

import { createDrawerNavigator } from '@react-navigation/drawer';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

const Drawer = createDrawerNavigator({
  drawerType: 'slide',
  drawerPosition: 'left',
  screenOptions: {
    drawerActiveTintColor: '#6200ee',
    drawerStyle: { backgroundColor: '#f5f5f5', width: 280 },
  },
  screens: {
    Home: { screen: HomeScreen, options: { title: 'Főoldal' } },
    Settings: { screen: SettingsScreen, options: { title: 'Beállítások' } },
    About: { screen: AboutScreen, options: { title: 'Rólunk' } },
  },
});

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaProvider>
        <Navigation />
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
}

A drawer navigátor animációi a React Native Reanimated könyvtárat használják a háttérben. Ha egyéni animációkat szeretnél hozzáadni a fiókos menühöz, érdemes megismerkedni a React Native Reanimated 4 animációs lehetőségeivel.

Beágyazott Navigátorok

A legtöbb valódi alkalmazásban kombinálni kell a navigátorokat. Egy tipikus struktúra: a Stack navigátor tartalmaz egy Tab navigátort, amely képernyőkre mutat. Ez eleinte bonyolultnak tűnhet, de a statikus API-val jóval átláthatóbb lett.

const HomeTabs = createBottomTabNavigator({
  screens: {
    Feed: { screen: FeedScreen, options: { title: 'Hírfolyam' } },
    Notifications: { screen: NotificationsScreen, options: { title: 'Értesítések' } },
  },
});

const RootStack = createNativeStackNavigator({
  screens: {
    Main: {
      screen: HomeTabs,
      options: { headerShown: false },
    },
    Modal: {
      screen: ModalScreen,
      options: { presentation: 'modal' },
    },
    Settings: {
      screen: SettingsScreen,
      options: { title: 'Beállítások' },
    },
  },
});

TypeScript beágyazott navigátorhoz

A NavigatorScreenParams típus segít a beágyazott navigátor paraméterlistájának megadásában:

import type { NavigatorScreenParams } from '@react-navigation/native';

type TabParamList = {
  Feed: undefined;
  Notifications: { unreadCount?: number };
};

type RootStackParamList = {
  Main: NavigatorScreenParams<TabParamList>;
  Modal: { message: string };
  Settings: undefined;
};

// Navigálás beágyazott képernyőre
navigation.navigate('Main', {
  screen: 'Notifications',
  params: { unreadCount: 5 },
});

Navigáció Hooks és Segédeszközök

A React Navigation v7 számos hasznos hookot biztosít az életciklus-kezeléshez és a navigációs állapot olvasásához — ezeket érdemes jól megismerni, mert sokat fogod őket használni:

import {
  useNavigation,
  useRoute,
  useFocusEffect,
  useIsFocused,
} from '@react-navigation/native';
import { useCallback } from 'react';

function MyScreen() {
  const navigation = useNavigation();
  const isFocused = useIsFocused();

  // Erőforrások kezelése fókusz alapján
  useFocusEffect(
    useCallback(() => {
      const subscription = setupWebSocket();
      return () => {
        subscription.close();
      };
    }, [])
  );

  return <Text>{isFocused ? 'Aktív' : 'Háttér'}</Text>;
}

Deep Linking a Static API-val

A statikus API egyik legnagyobb előnye, hogy a deep linking konfiguráció automatikusan generálódik a navigációs struktúrából — nincs szükség kézi karbantartásra. Ez korábban rengeteg hibaforrás volt.

import * as Linking from 'expo-linking';

const linking = {
  prefixes: [Linking.createURL('/'), 'https://myapp.com'],
  // A config automatikusan generálódik a statikus struktúrából!
  config: RootStack.Navigator.getPathConfig(),
};

export const Navigation = createStaticNavigation(RootStack);

export default function App() {
  return (
    <SafeAreaProvider>
      <Navigation linking={linking} />
    </SafeAreaProvider>
  );
}

Hitelesítési Folyam Implementálása

A statikus API if tulajdonságával feltételesen jeleníthetsz meg képernyőket — ez ideális a hitelesítési folyamathoz, és sokkal elegánsabb, mint a korábbi megoldások.

import { useAuth } from './useAuth';

function useIsSignedIn() {
  const { isSignedIn } = useAuth();
  return isSignedIn;
}

function useIsSignedOut() {
  const { isSignedIn } = useAuth();
  return !isSignedIn;
}

const RootStack = createNativeStackNavigator({
  screens: {
    Home: { if: useIsSignedIn, screen: HomeScreen },
    Profile: { if: useIsSignedIn, screen: ProfileScreen },
    Login: { if: useIsSignedOut, screen: LoginScreen },
    Register: { if: useIsSignedOut, screen: RegisterScreen },
  },
});

Amikor az isSignedIn állapot megváltozik, a navigátor automatikusan frissíti a látható képernyők listáját. Nem kell manuálisan navigálni be- és kijelentkezéskor — csak az állapotot kell frissíteni, a többi magától megtörténik.

Teljesítményoptimalizálás

Végül néhány bevált gyakorlat, amelyek valóban számítanak a teljesítmény szempontjából:

• Native Stack Navigator: Mindig a @react-navigation/native-stack-et részesítsd előnyben a JS-alapú @react-navigation/stack-kel szemben — a natív animációk lényegesen gördülékenyebbek.
• Lazy loading: Tab navigátorban a képernyők alapértelmezés szerint lustaán töltődnek be, ami csökkenti a kezdeti betöltési időt.
• react-native-screens engedélyezése: Az enableScreens() hívás gondoskodik arról, hogy a háttérképernyők 0% CPU-t fogyasszanak.
• Header memoizálás: Egyéni header komponenseket védd React.memo-val, hogy elkerüld a felesleges újrarenderelést navigáláskor.
• Kerüld az inline callback-eket az options-ban: A navigátor screenOptions-eit ne definiáld inline függvényként, hogy elkerüld a felesleges újralétrehozást.