Stack Navigator: co to jest, nawigacja stosowa w React Native

Czym jest Stack Navigator?

Stack Navigator — jeden z podstawowych nawigatorów biblioteki React Navigation, implementujący model stosowy ekranów. Zapewnia znajomą dla użytkowników mobilnych nawigację: otwarcie nowego ekranu towarzyszy animacja wjazdu z prawej, a przycisk «Wstecz» lub gest przesunięcia przywraca poprzedni ekran. Stack Navigator jest obsługiwany na iOS i Android, wykorzystując natywne komponenty platformy dla maksymalnej wydajności.

React Navigation to najpopularniejsza biblioteka nawigacji dla React Native, zainstalowana w 85% projektów (według danych npm, 2026). Stack Navigator wchodzi w skład jej rdzenia i jest dostępny w dwóch implementacjach: createNativeStackNavigator (natywna, zalecana) i createStackNavigator (JavaScript, dla złożonych niestandardowych animacji). Wersja natywna pojawiła się w React Navigation v5 i stała się standardem w v6+.

Główna zaleta Stack Navigator — naturalne zachowanie, znane użytkownikom iOS i Android. Na iOS stos jest wizualnie reprezentowany jako UINavigationController, na Android — FragmentManager z animacją slide. Deweloper nie musi implementować logiki stosu ręcznie — nawigator zarządza stanami ekranów, back stack i animacjami automatycznie.

Jak działa nawigacja stosowa

Nawigacja stosowa opiera się na zasadzie LIFO (Last In, First Out). Gdy użytkownik otwiera nowy ekran, nawigator umieszcza go na szczycie stosu. Po naciśnięciu «Wstecz» górny ekran jest usuwany, a użytkownik widzi poprzedni. Stos może zawierać dowolną liczbę ekranów — ograniczenie stanowi tylko pamięć urządzenia.

Każdy ekran w stosie zachowuje swój stan. Po powrocie do poprzedniego ekranu jego stan jest przywracany automatycznie. To odróżnia stos od innych typów nawigacji (Tab, Drawer), gdzie ekrany mogą być odtwarzane. React Navigation zarządza stanem poprzez własny mechanizm kontekstu nawigacyjnego.

Gest przesunięcia do powrotu

Na iOS Stack Navigator obsługuje gest przesunięcia od lewej krawędzi ekranu do powrotu — to standardowe zachowanie iOS, którego użytkownicy oczekują. Na Android gest jest domyślnie wyłączony, ale można go włączyć przez opcję gestureEnabled. W Native Stack gest działa natywnie, bez opóźnień wątku JavaScript.

Native Stack a JS Stack

React Navigation oferuje dwa typy Stack Navigator: Native Stack (createNativeStackNavigator) i JS Stack (createStackNavigator). Główna różnica to miejsce wykonywania animacji. Native Stack używa natywnych sterowników animacji iOS i Android, podczas gdy JS Stack działa przez wątek JavaScript React Native. Wybór między nimi zależy od wymagań dotyczących wydajności i dostosowywania.

Native Stack jest zalecany dla większości projektów. Zapewnia płynne animacje 60 FPS bez blokowania wątku JS, obsługuje systemowy gest przesunięcia na iOS i używa natywnych przejść — slide na iOS, fade na Android. Jednak Native Stack ma ograniczone możliwości dostosowywania animacji: dostępny jest tylko predefiniowany zestaw przejść.

JS Stack daje pełną kontrolę nad animacjami przez cardStyleInterpolator. Deweloper może stworzyć dowolną animację: skalowanie, obrót, paralaksę, niestandardowe krzywe. Minus — animacje działają w wątku JS, co może powodować spadki klatek na słabszych urządzeniach przy złożonych przejściach. Dla 70% projektów Native Stack jest w pełni wystarczający.

// Native Stack — zalecana implementacja
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>
  );
}

Instalacja i konfiguracja Stack Navigator

Aby rozpocząć pracę z Stack Navigator, należy zainstalować React Navigation i jego zależności. Minimalny zestaw obejmuje @react-navigation/native, @react-navigation/native-stack i react-native-screens. Po instalacji aplikacja jest owijana w NavigationContainer — kontekst zapewniający stan nawigacji wszystkim komponentom potomnym.

# Instalacja zależności React Navigation
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# Dla iOS — instalacja pod
cd ios && pod install && cd ..

Po instalacji tworzony jest Stack.Navigator z zdefiniowanymi ekranami w RootStackParamList. Każdy ekran jest powiązany z komponentem React przez prop component. Nawigator może być głównym lub zagnieżdżonym w innym nawigatorze (Tab, Drawer). Do konfiguracji stosuje się screenOptions — wspólne dla wszystkich ekranów lub indywidualne dla każdego.

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: 'Strona główna' }} />
        <Stack.Screen name="Details" component={DetailsScreen}
          options={({ route }) => ({ title: route.params.title })} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Parametry i dostosowywanie Stack Navigator

Stack Navigator oferuje wiele opcji do dostosowywania wyglądu i zachowania. Główne parametry ustawia się przez screenOptions na poziomie Navigator lub options na poziomie Screen. Deweloper może skonfigurować tytuł, animację przejścia, gest przesunięcia, styl karty i przyciemnienie tła. Elastyczność ustawień pozwala dostosować nawigację do systemu projektowego aplikacji.

Niestandardowe animacje przez cardStyleInterpolator

Dla JS Stack cardStyleInterpolator pozwala tworzyć dowolne animacje przejść między ekranami. To potężne narzędzie do implementacji unikalnych efektów wizualnych: skalowanie, obrót, paralaksa, poziomy flip. Funkcja otrzymuje bieżące wartości postępu animacji (current, next) i zwraca style dla animowanych elementów.

Typizacja nawigacji z TypeScript

Stack Navigator obsługuje pełną typizację przez TypeScript. W tym celu definiuje się RootStackParamList — typ-obiekt, gdzie klucze to nazwy ekranów, a wartości to typy parametrów. Po typizacji navigation.navigate i route.params otrzymują autouzupełnianie i sprawdzanie typów. Eliminuje to błędy przekazywania parametrów na etapie kompilacji.

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

// Typowany ekran
type ProductScreenProps = NativeStackScreenProps<RootStackParamList, 'Product'>;

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

  return (
    <View>
      <Text>Produkt {id} — {category}</Text>
      <Button title="Do koszyka"
        onPress={() => navigation.navigate('Checkout', {
          items: [{ id, quantity: 1 }],
          total: 99.99,
        })} />
    </View>
  );
}

Zaawansowane scenariusze: okna modalne i grupy

Stack Navigator obsługuje grupowanie ekranów i okna modalne. Grupy (Screen Group) pozwalają stosować wspólne ustawienia do wielu ekranów bez powielania. Okna modalne są implementowane przez stack presentation: 'modal' — ekran otwiera się od dołu z przyciemnieniem tła, jak systemowy modal na iOS. Ta opcja jest dostępna tylko w Native Stack.

Do złożonej nawigacji Stack Navigator może być zagnieżdżony w Tab Navigator lub Drawer Navigator. Na przykład zakładka «Główna» zawiera własny stos ekranów, a zakładka «Profil» — swój. Taka kompozycja nawigatorów to standardowe podejście w aplikacjach produkcyjnych. Każdy stos jest izolowany: back stack wewnątrz zakładki nie wpływa na inne zakładki.

// Zagnieżdżony stos w 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>
  );
}

// Grupy ekranów ze wspólnymi opcjami
<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>