React Academy · Lekcja

Nawigacja z Expo Router

Konfigurowanie Expo Router do nawigacji opartej na plikach, z typowanymi trasami i deep linkingiem.

Nawigacja z Expo Router to bezpłatna lekcja React Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Czym jest Expo Router?

Expo Router to biblioteka routingu opartego na plikach dla React Native, zbudowana na bazie React Navigation. Podobnie jak Next.js App Router, definiuje trasy na podstawie struktury plików.

Instalacja

Proszę utworzyć nowy projekt Expo ze wstępnie skonfigurowanym Expo Routerem.

# Create new project:
npx create-expo-app@latest my-app --template tabs

# Or add to existing Expo project:
npx expo install expo-router react-native-safe-area-context react-native-screens

Trasy oparte na plikach

Pliki w katalogu app/ automatycznie stają się trasami. index.tsx jest trasą główną, a [id].tsx — segmentem dynamicznym.

app/
  _layout.tsx       # root layout (Stack navigator)
  index.tsx          # → / (home screen)
  profile.tsx        # → /profile
  posts/
    _layout.tsx      # posts stack layout
    index.tsx        # → /posts
    [id].tsx         # → /posts/123 (dynamic)

Układ główny

Główny plik _layout.tsx opakowuje wszystkie ekrany za pomocą providerów i definiuje nawigator najwyższego poziomu.

// app/_layout.tsx
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: 'Home' }} />
      <Stack.Screen name="profile" options={{ title: 'Profile' }} />
    </Stack>
  );
}

Nawigacja za pomocą Link

Proszę użyć komponentu Link z expo-router do nawigacji deklaratywnej — podobnie jak w przypadku next/link.

import { Link } from 'expo-router';

function HomeScreen() {
  return (
    <Link href="/profile">Go to Profile</Link>
  );
}

Nawigacja za pomocą useRouter

Proszę użyć useRouter() do nawigacji imperatywnej — programowego wykonywania operacji push, replace lub go back.

import { useRouter } from 'expo-router';

function LoginForm() {
  const router = useRouter();

  async function handleLogin() {
    await login();
    router.replace('/dashboard');
  }
}

Trasy dynamiczne

Parametry trasy można odczytać za pomocą useLocalSearchParams() w pliku trasy dynamicznej.

// app/posts/[id].tsx
import { useLocalSearchParams } from 'expo-router';

export default function PostScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  return <PostDetail postId={id} />;
}

Nawigacja za pomocą kart

Proszę użyć Tabs z expo-router wewnątrz układu grupy, aby skonfigurować dolną nawigację za pomocą kart.

// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen name="index" options={{ title: 'Home', tabBarIcon: ({ color }) => <HomeIcon color={color} /> }} />
      <Tabs.Screen name="explore" options={{ title: 'Explore' }} />
    </Tabs>
  );
}

Ekrany modalne

Ekran można wyświetlić jako modal, ustawiając presentation: 'modal' w opcjach Stack.Screen.

// app/_layout.tsx
<Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Settings' }} />

// Navigate to modal:
router.push('/modal');

Głębokie linkowanie

Expo Router automatycznie obsługuje głębokie linki. Schemat URL należy zdefiniować w app.json, a linki takie jak myapp://posts/123 otworzą właściwy ekran.

// app.json
{
  "expo": {
    "scheme": "myapp"
  }
}

Wzorzec uwierzytelniania

Należy użyć układu głównego, który warunkowo renderuje ekrany uwierzytelniania albo karty aplikacji, zależnie od stanu uwierzytelnienia.

// app/_layout.tsx
import { Redirect } from 'expo-router';

function RootLayout() {
  const { user } = useAuth();
  if (!user) return <Redirect href="/login" />;
  return <Stack />;
}

Szybkie sprawdzenie

Który hook Expo Router odczytuje dynamiczne parametry trasy, takie jak id w /posts/[id]?

Podsumowanie

Expo Router korzysta z routingu opartego na plikach: app/index.tsx → strona główna, app/[id].tsx → trasa dynamiczna. Układy należy definiować w _layout.tsx, nawigować za pomocą Link lub useRouter(), a parametry odczytywać za pomocą useLocalSearchParams().

Często zadawane pytania

Czy lekcja „Nawigacja z Expo Router” jest bezpłatna?

Tak — pełny tekst „Nawigacja z Expo Router” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Nawigacja z Expo Router”?

Konfigurowanie Expo Router do nawigacji opartej na plikach, z typowanymi trasami i deep linkingiem. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Nawigacja z Expo Router”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do React Academy