Stack Navigator: vad är det, stacknavigering i React Native

Vad är Stack Navigator?

Stack Navigator — en av de grundläggande navigatorerna i React Navigation-biblioteket som implementerar stackmodellen för skärmar. Det ger navigering som är bekant för mobilanvändare: att öppna en ny skärm åtföljs av en animering från höger och «Tillbaka»-knappen eller svepgest återför användaren till föregående skärm. Stack Navigator stöds på iOS och Android och använder plattformens inbyggda komponenter för maximal prestanda.

React Navigation är det populäraste navigeringsbiblioteket för React Native, installerat i 85% av projekten (enligt npm-data, 2026). Stack Navigator ingår i dess kärna och finns i två implementeringar: createNativeStackNavigator (inbyggd, rekommenderad) och createStackNavigator (JavaScript, för komplexa anpassade animeringar). Den inbyggda versionen dök upp i React Navigation v5 och blev standard i v6+.

Den främsta fördelen med Stack Navigator — naturligt beteende som är bekant för iOS- och Android-användare. På iOS representeras stacken visuellt som UINavigationController, på Android som FragmentManager med slide-animering. Utvecklaren behöver inte implementera stacklogiken manuellt — navigatorn hanterar skärmtillstånd, back stack och animeringar automatiskt.

Hur stacknavigering fungerar

Stacknavigering är baserad på LIFO-principen (Last In, First Out). När användaren öppnar en ny skärm placerar navigatorn den överst i stacken. Vid tryck på «Tillbaka» tas den översta skärmen bort och användaren ser den föregående. Stacken kan innehålla valfritt antal skärmar — begränsningen är endast enhetens minne.

Varje skärm i stacken behåller sitt tillstånd. Vid återgång till föregående skärm återställs dess tillstånd automatiskt. Detta skiljer stacken från andra navigeringstyper (Tab, Drawer), där skärmar kan återskapas. React Navigation hanterar tillståndet via sin egen navigeringskontextmekanism.

Svepgest för återgång

På iOS stöder Stack Navigator svepgest från vänsterkanten av skärmen för att gå tillbaka — detta är standardbeteendet på iOS som användare förväntar sig. På Android är gesten inaktiverad som standard, men kan aktiveras via alternativet gestureEnabled. I Native Stack fungerar gesten inbyggt, utan fördröjningar i JavaScript-tråden.

Native Stack vs JS Stack

React Navigation erbjuder två typer av Stack Navigator: Native Stack (createNativeStackNavigator) och JS Stack (createStackNavigator). Huvudskillnaden är var animeringen utförs. Native Stack använder inbyggda animeringsdrivrutiner för iOS och Android, medan JS Stack fungerar via React Navigations JavaScript-tråd. Valet mellan dem beror på prestanda- och anpassningskrav.

Native Stack rekommenderas för de flesta projekt. Det ger jämna 60 FPS-animeringar utan att blockera JS-tråden, stöder systemets svepgest på iOS och använder inbyggda övergångar — slide på iOS, fade på Android. Native Stack är dock begränsad i anpassning av animeringar: endast en fördefinierad uppsättning övergångar är tillgänglig.

JS Stack ger fullständig kontroll över animeringar via cardStyleInterpolator. Utvecklaren kan skapa vilken animering som helst: skalning, rotation, parallax, anpassade kurvor. Nackdel — animeringarna körs i JS-tråden, vilket kan orsaka bildtapp på svagare enheter vid komplexa övergångar. För 70% av projekten är Native Stack mer än tillräckligt.

// Native Stack — rekommenderad implementering
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>
  );
}

Installation och konfiguration av Stack Navigator

För att komma igång med Stack Navigator måste React Navigation och dess beroenden installeras. Den minimala uppsättningen inkluderar @react-navigation/native, @react-navigation/native-stack och react-native-screens. Efter installation slås appen in i NavigationContainer — en kontext som tillhandahåller navigeringstillstånd till alla underordnade komponenter.

# Installation av React Navigation-beroenden
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# För iOS — installation av pod
cd ios && pod install && cd ..

Efter installation skapas Stack.Navigator med definierade skärmar i RootStackParamList. Varje skärm kopplas till en React-komponent via prop component. Navigatom kan vara rot eller kapslad i en annan navigator (Tab, Drawer). För konfiguration används screenOptions — gemensamma för alla skärmar eller individuella för varje.

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

Parametrar och anpassning av Stack Navigator

Stack Navigator erbjuder många alternativ för att anpassa utseende och beteende. Huvudparametrarna ställs in via screenOptions på Navigator-nivå eller options på Screen-nivå. Utvecklaren kan konfigurera titel, övergångsanimering, svepgest, kortstil och bakgrundsmörkning. Flexibiliteten i inställningarna gör det möjligt att anpassa navigeringen till applikationens designsystem.

Anpassade animeringar via cardStyleInterpolator

För JS Stack tillåter cardStyleInterpolator att skapa godtyckliga övergångsanimeringar mellan skärmar. Detta är ett kraftfullt verktyg för att implementera unika visuella effekter: skalning, rotation, parallax, horisontell flip. Funktionen tar emot aktuella animeringsframstegsvärden (current, next) och returnerar stilar för de animerade elementen.

Typning av navigering med TypeScript

Stack Navigator stöder fullständig typning via TypeScript. För detta definieras RootStackParamList — ett typ-objekt där nycklarna är skärmnamn och värdena är parametertyper. Efter typning får navigation.navigate och route.params autokomplettering och typkontroll. Detta eliminerar parameteröverföringsfel i kompileringsfasen.

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

// Typad skärm
type ProductScreenProps = NativeStackScreenProps<RootStackParamList, 'Product'>;

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

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

Avancerade scenarier: modala fönster och grupper

Stack Navigator stöder gruppering av skärmar och modala fönster. Grupper (Screen Group) gör det möjligt att tillämpa gemensamma inställningar på flera skärmar utan dubbelarbete. Modala fönster implementeras via stack presentation: 'modal' — skärmen öppnas nedifrån med mörkare bakgrund, som en systemmodal på iOS. Detta alternativ är endast tillgängligt i Native Stack.

För komplex navigering kan Stack Navigator kapslas i Tab Navigator eller Drawer Navigator. Till exempel innehåller fliken «Hem» sin egen skärmstack och fliken «Profil» sin egen. En sådan sammansättning av navigatorer är standardmetoden för produktionsapplikationer. Varje stack är isolerad: back stack inom en flik påverkar inte andra flikar.

// Kapslad stack i 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>
  );
}

// Skärmgrupper med gemensamma alternativ
<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>