Stack Navigator: co to je, zásobníková navigace v React Native

Co je Stack Navigator?

Stack Navigator — jeden ze základních navigátorů knihovny React Navigation, který implementuje zásobníkový model obrazovek. Poskytuje navigaci známou mobilním uživatelům: otevření nové obrazovky je doprovázeno animací vjezdu zprava a tlačítko «Zpět» nebo gesto přejetí vrátí uživatele na předchozí obrazovku. Stack Navigator je podporován na iOS a Android, využívající nativní komponenty platformy pro maximální výkon.

React Navigation je nejoblíbenější knihovna navigace pro React Native, nainstalovaná v 85% projektů (podle dat npm, 2026). Stack Navigator je součástí jejího jádra a je dostupný ve dvou implementacích: createNativeStackNavigator (nativní, doporučená) a createStackNavigator (JavaScript, pro složité vlastní animace). Nativní verze se objevila v React Navigation v5 a stala se standardem v v6+.

Hlavní výhoda Stack Navigator — přirozené chování, známé uživatelům iOS a Android. Na iOS je zásobník vizuálně reprezentován jako UINavigationController, na Android — jako FragmentManager s animací slide. Vývojář nemusí ručně implementovat logiku zásobníku — navigátor automaticky spravuje stavy obrazovek, back stack a animace.

Jak funguje zásobníková navigace

Zásobníková navigace je založena na principu LIFO (Last In, First Out). Když uživatel otevře novou obrazovku, navigátor ji umístí na vrchol zásobníku. Po stisknutí «Zpět» je horní obrazovka odstraněna a uživatel vidí předchozí. Zásobník může obsahovat libovolný počet obrazovek — omezen je pouze pamětí zařízení.

Každá obrazovka v zásobníku si uchovává svůj stav. Při návratu na předchozí obrazovku se její stav automaticky obnoví. Toto odlišuje zásobník od jiných typů navigace (Tab, Drawer), kde mohou být obrazovky znovu vytvořeny. React Navigation spravuje stav prostřednictvím vlastního mechanismu navigačního kontextu.

Gesto přejetí pro návrat

Na iOS Stack Navigator podporuje gesto přejetí z levého okraje obrazovky pro návrat — to je standardní chování iOS, které uživatelé očekávají. Na Android je gesto ve výchozím nastavení vypnuto, ale lze jej zapnout pomocí možnosti gestureEnabled. V Native Stack gesto funguje nativně, bez zpoždění JavaScriptového vlákna.

Native Stack vs JS Stack

React Navigation nabízí dva typy Stack Navigator: Native Stack (createNativeStackNavigator) a JS Stack (createStackNavigator). Hlavní rozdíl je místo provádění animace. Native Stack používá nativní ovladače animací iOS a Android, zatímco JS Stack pracuje přes JavaScriptové vlákno React Native. Volba mezi nimi závisí na požadavcích na výkon a přizpůsobení.

Native Stack je doporučen pro většinu projektů. Poskytuje plynulé animace 60 FPS bez blokování JS vlákna, podporuje systémové gesto přejetí na iOS a používá nativní přechody — slide na iOS, fade na Android. Native Stack je však omezen v přizpůsobení animací: k dispozici je pouze předdefinovaná sada přechodů.

JS Stack dává plnou kontrolu nad animacemi přes cardStyleInterpolator. Vývojář může vytvořit jakoukoli animaci: škálování, rotaci, paralaxu, vlastní křivky. Nevýhoda — animace běží v JS vlákně, což může způsobit pokles snímků na slabších zařízeních při složitých přechodech. Pro 70% projektů je Native Stack zcela dostačující.

// Native Stack — doporučená implementace
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>
  );
}

Instalace a nastavení Stack Navigator

Pro zahájení práce s Stack Navigator je třeba nainstalovat React Navigation a jeho závislosti. Minimální sada zahrnuje @react-navigation/native, @react-navigation/native-stack a react-native-screens. Po instalaci je aplikace zabalena do NavigationContainer — kontextu, který poskytuje navigační stav všem podřízeným komponentám.

# Instalace závislostí React Navigation
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# Pro iOS — instalace pod
cd ios && pod install && cd ..

Po instalaci je vytvořen Stack.Navigator s definovanými obrazovkami v RootStackParamList. Každá obrazovka je propojena s React komponentou přes prop component. Navigátor může být kořenový nebo vnořený do jiného navigátoru (Tab, Drawer). Pro konfiguraci se používají screenOptions — společné pro všechny obrazovky nebo individuální pro každou.

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

Parametry a přizpůsobení Stack Navigator

Stack Navigator nabízí mnoho možností pro přizpůsobení vzhledu a chování. Hlavní parametry se nastavují přes screenOptions na úrovni Navigator nebo options na úrovni Screen. Vývojář může nakonfigurovat nadpis, animaci přechodu, gesto přejetí, styl karty a ztmavení pozadí. Flexibilita nastavení umožňuje přizpůsobit navigaci designovému systému aplikace.

Vlastní animace přes cardStyleInterpolator

Pro JS Stack umožňuje cardStyleInterpolator vytvářet libovolné přechodové animace mezi obrazovkami. Je to výkonný nástroj pro implementaci jedinečných vizuálních efektů: škálování, rotace, paralaxa, horizontální flip. Funkce přijímá aktuální hodnoty průběhu animace (current, next) a vrací styly pro animované prvky.

Typizace navigace s TypeScript

Stack Navigator podporuje plnou typizaci přes TypeScript. K tomu se definuje RootStackParamList — typ-objekt, kde klíče jsou názvy obrazovek a hodnoty jsou typy parametrů. Po typizaci získávají navigation.navigate a route.params automatické doplňování a kontrolu typů. To eliminuje chyby při předávání parametrů ve fázi kompilace.

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

// Typizovaná obrazovka
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 košíku"
        onPress={() => navigation.navigate('Checkout', {
          items: [{ id, quantity: 1 }],
          total: 99.99,
        })} />
    </View>
  );
}

Pokročilé scénáře: modální okna a skupiny

Stack Navigator podporuje seskupování obrazovek a modální okna. Skupiny (Screen Group) umožňují aplikovat společná nastavení na více obrazovek bez duplikace. Modální okna jsou implementována přes stack presentation: 'modal' — obrazovka se otevírá zdola se ztmavením pozadí, jako systémový modál na iOS. Tato možnost je dostupná pouze v Native Stack.

Pro složitou navigaci může být Stack Navigator vnořen do Tab Navigator nebo Drawer Navigator. Například karta «Domů» obsahuje vlastní zásobník obrazovek a karta «Profil» — svůj. Taková kompozice navigátorů je standardním přístupem pro produkční aplikace. Každý zásobník je izolován: back stack uvnitř karty neovlivňuje ostatní karty.

// Vnořený zásobník v 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>
  );
}

// Skupiny obrazovek se společnými možnostmi
<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>