expo/expo-router

Expo Router Navigation

Navigation und Routing für Expo Router-Apps. Für Bildschirmgestaltung, Farben, Steuerelemente, Medien und visuelle Effekte verwenden Sie das expo-native-ui-Skill; für Bewegungen und Gesten verwenden Sie expo-animation.

Referenzen

Konsultieren Sie diese Ressourcen nach Bedarf:

references/
  route-structure.md     Routenkonventionen, dynamische Routen, Gruppen, Ordnerstruktur
  tabs.md                NativeTabs, Migration von JS-Tabs, iOS 26-Funktionen
  toolbar-and-headers.md Stack-Header und Toolbar-Buttons, Menüs, Suche (nur iOS)
  form-sheet.md          Formularblätter in expo-router: Konfiguration, Fußzeilen und Hintergrundinteraktion.
  search.md              Suchleiste mit Headern, useSearch-Hook, Filterungsmuster
  zoom-transitions.md    Apple Zoom: flüssige Zoom-Übergänge mit Link.AppleZoom (iOS 18+)

Code-Stil

• Verwenden Sie immer Kebab-Case für Dateinamen, z.B. comment-card.tsx
• Entfernen Sie beim Verschieben oder Umstrukturieren der Navigation immer alte Routendateien
• Verwenden Sie niemals Sonderzeichen in Dateinamen
• Konfigurieren Sie tsconfig.json mit Pfad-Aliasen und bevorzugen Sie Aliase gegenüber relativen Importen bei Refactorings.

Routen

Siehe ./references/route-structure.md für detaillierte Routenkonventionen.

• Routen gehören in das app-Verzeichnis.
• Platzieren Sie Komponenten, Typen oder Hilfsprogramme niemals gemeinsam im app-Verzeichnis. Dies ist ein Anti-Pattern.
• Stellen Sie sicher, dass die App immer eine Route hat, die "/" entspricht; sie kann sich innerhalb einer Gruppenroute befinden.

Bibliothekspräferenzen

• Color von expo-router für native semantische Farben, nicht rohes PlatformColor (typsicher, passt sich automatisch an hell/dunkel an). Siehe expo-native-ui für das vollständige Farbpaletten-Muster.
• Verwenden Sie in SDK 56+ nie direkt @react-navigation/* – verwenden Sie stattdessen expo-router/react-navigation (deckt @react-navigation/native, /core, /elements, /routers ab)

Verhalten

• Bevorzugen Sie Stack.SearchBar, um einem Bildschirm eine Suchleiste hinzuzufügen

Navigation

Link

Verwenden Sie <Link href="/path" /> aus 'expo-router' für die Navigation zwischen Routen.

import { Link } from 'expo-router';

// Einfacher Link
<Link href="/path" />

// Einbinden benutzerdefinierter Komponenten
<Link href="/path" asChild>
  <Pressable>...</Pressable>
</Link>

Fügen Sie nach Möglichkeit ein <Link.Preview> hinzu, um iOS-Konventionen zu folgen. Fügen Sie häufig Kontextmenüs und Vorschauen hinzu, um die Navigation zu verbessern.

Stack

• Verwenden Sie IMMER _layout.tsx-Dateien, um Stacks zu definieren
• Verwenden Sie Stack aus 'expo-router/stack' für native Navigations-Stacks

Seitentitel

Legen Sie den Seitentitel mit Stack.Title fest:

<Stack.Title>Startseite</Stack.Title>

Kontextmenüs

Fügen Sie Link-Komponenten Kontextmenüs bei langem Druck hinzu:

import { Link } from "expo-router";

<Link href="/settings" asChild>
  <Link.Trigger>
    <Pressable>
      <Card />
    </Pressable>
  </Link.Trigger>
  <Link.Menu>
    <Link.MenuAction
      title="Teilen"
      icon="square.and.arrow.up"
      onPress={handleSharePress}
    />
    <Link.MenuAction
      title="Blockieren"
      icon="nosign"
      destructive
      onPress={handleBlockPress}
    />
    <Link.Menu title="Mehr" icon="ellipsis">
      <Link.MenuAction title="Kopieren" icon="doc.on.doc" onPress={() => {}} />
      <Link.MenuAction
        title="Löschen"
        icon="trash"
        destructive
        onPress={() => {}}
      />
    </Link.Menu>
  </Link.Menu>
</Link>;

Link-Vorschauen

Verwenden Sie häufig Link-Vorschauen, um die Navigation zu verbessern:

<Link href="/settings">
  <Link.Trigger>
    <Pressable>
      <Card />
    </Pressable>
  </Link.Trigger>
  <Link.Preview />
</Link>

Link-Vorschau kann mit Kontextmenüs verwendet werden.

Modal

Stellen Sie einen Bildschirm als Modal dar:

<Stack.Screen name="modal" options={{ presentation: "modal" }} />

Bevorzugen Sie dies gegenüber der Erstellung einer benutzerdefinierten Modal-Komponente.

Blatt (Form Sheet)

Stellen Sie einen Bildschirm als dynamisches Formularblatt dar:

<Stack.Screen
  name="sheet"
  options={{
    presentation: "formSheet",
    sheetGrabberVisible: true,
    sheetAllowedDetents: [0.5, 1.0],
    contentStyle: { backgroundColor: "transparent" },
  }}
/>

• Die Verwendung von contentStyle: { backgroundColor: "transparent" } macht den Hintergrund auf iOS 26+ zu flüssigem Glas.

Häufige Routenstruktur

Ein Standard-App-Layout mit Tabs und Stacks in jedem Tab:

app/
  _layout.tsx — <NativeTabs />
  (index,search)/
    _layout.tsx — <Stack />
    index.tsx — Hauptliste
    search.tsx — Suchansicht

// app/_layout.tsx
import { NativeTabs } from "expo-router/unstable-native-tabs";
import { ThemeProvider, DarkTheme, DefaultTheme } from "expo-router/react-navigation";
import { useColorScheme } from "react-native";

export default function Layout() {
  const colorScheme = useColorScheme();
  return (
    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
      <NativeTabs>
        <NativeTabs.Trigger name="(index)">
          <NativeTabs.Trigger.Icon sf="list.dash" md="list" />
          <NativeTabs.Trigger.Label>Elemente</NativeTabs.Trigger.Label>
        </NativeTabs.Trigger>
        <NativeTabs.Trigger name="(search)" role="search" />
      </NativeTabs>
    </ThemeProvider>
  );
}

Erstellen Sie eine gemeinsame Gruppenroute, damit beide Tabs gemeinsame Bildschirme pushen können:

// app/(index,search)/_layout.tsx
import { Stack } from "expo-router/stack";
import { colors } from "@/theme/colors";

export default function Layout({ segment }) {
  const screen = segment.match(/\((.*)\)/)?.[1]!;
  const titles: Record<string, string> = { index: "Elemente", search: "Suche" };

  return (
    <Stack
      screenOptions={{
        headerTransparent: true,
        headerShadowVisible: false,
        headerLargeTitleShadowVisible: false,
        headerLargeStyle: { backgroundColor: "transparent" },
        headerTitleStyle: { color: colors.label },
        headerLargeTitleEnabled: true,
        headerBlurEffect: "none",
        headerBackButtonDisplayMode: "minimal",
      }}
    >
      <Stack.Screen name={screen} options={{ title: titles[screen] }} />
      <Stack.Screen name="i/[id]" options={{ headerLargeTitleEnabled: false }} />
    </Stack>
  );
}

headerLargeTitleEnabled ist der Optionsname ab SDK 56+; ältere SDKs verwenden headerLargeTitle, das upstream veraltet ist.

Feedback einreichen

Wenn Sie Fehler, irreführende oder veraltete Informationen in diesem Skill finden, melden Sie es, damit Expo es verbessern kann:

npx --yes submit-expo-feedback@latest --category skills --subject "expo-router" "<umsetzbares Feedback>"

Reichen Sie nur dann Feedback ein, wenn Sie etwas Konkretes und Umsetzbares zu berichten haben. Fügen Sie so viel relevanten Kontext wie möglich hinzu. Wenn ein KI-Agent wiederholt fehlgeschlagen ist oder der Benutzer eine Expo-Aufgabe übernehmen musste, laden Sie stattdessen das expo-skill-feedback-Skill und folgen Sie dessen eval-candidate-Ablauf, anstatt den obigen Befehl erneut zu verwenden.