Nawigacja między ekranami

Nieoficjalne Tłumaczenie Beta

Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →

Aplikacje mobilne rzadko składają się z jednego ekranu. Zarządzanie prezentacją oraz przejściami między wieloma ekranami jest zwykle obsługiwane przez tzw. navigator.

Niniejszy przewodnik omawia różne komponenty nawigacyjne dostępne w React Native. Jeśli zaczynasz pracę z nawigacją, prawdopodobnie będziesz chciał użyć React Navigation. React Navigation zapewnia proste rozwiązanie nawigacyjne, umożliwiające stosowanie popularnych wzorców takich jak nawigacja stosowa i zakładkowa na obu platformach - Androidzie i iOS.

Jeśli integrujesz React Native z aplikacją, która już obsługuje nawigację natywnie, lub szukasz alternatywy dla React Navigation, następująca biblioteka zapewnia natywną nawigację na obu platformach: react-native-navigation.

React Navigation

To rozwiązanie społecznościowe to samodzielna biblioteka, która pozwala programistom konfigurować ekrany aplikacji za pomocą kilku linii kodu.

Szablon startowy

Jeśli zaczynasz nowy projekt, możesz użyć szablonu React Navigation do szybkiego skonfigurowania projektu z Expo:

shell

npx create-expo-app@latest --template react-navigation/template

Więcej informacji o rozpoczęciu pracy znajdziesz w pliku README.md projektu.

Instalacja i konfiguracja

Najpierw musisz je zainstalować w swoim projekcie:

shell

npm install @react-navigation/native @react-navigation/native-stack

Następnie zainstaluj wymagane zależności peer. Musisz uruchomić różne polecenia w zależności od tego, czy Twój projekt jest zarządzany przez Expo, czy to zwykły (bare) projekt React Native.

• Jeśli masz projekt zarządzany przez Expo, zainstaluj zależności za pomocą expo:

  shell

  npx expo install react-native-screens react-native-safe-area-context

• Jeśli masz zwykły (bare) projekt React Native, zainstaluj zależności za pomocą npm:

  shell

  npm install react-native-screens react-native-safe-area-context

  Dla iOS ze zwykłym projektem React Native upewnij się, że masz zainstalowane CocoaPods. Następnie zainstaluj pody, aby dokończyć instalację:

  shell

  cd ios
  pod install
  cd ..

Po zainstalowaniu i skonfigurowaniu zależności możesz przejść do konfiguracji projektu do używania React Navigation.

Podczas korzystania z React Navigation konfigurujesz navigatory w swojej aplikacji. Navigatory obsługują przejścia między ekranami w aplikacji i dostarczają elementy UI takie jak nagłówek, pasek zakładek itp.

Teraz możesz zbudować i uruchomić swoją aplikację na urządzeniu/symulatorze.

Użycie

Możesz teraz stworzyć aplikację z ekranem głównym i ekranem profilu:

tsx

import * as React from 'react';
import {createStaticNavigation} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

const RootStack = createNativeStackNavigator({
  screens: {
    Home: {
      screen: HomeScreen,
      options: {title: 'Welcome'},
    },
    Profile: {
      screen: ProfileScreen,
    },
  },
});

const Navigation = createStaticNavigation(RootStack);

export default function App() {
  return <Navigation />;
}

W tym przykładzie RootStack to navigator z 2 ekranami (Home i Profile), zdefiniowanymi we właściwości screens w createNativeStackNavigator. Podobnie możesz zdefiniować dowolną liczbę ekranów.

Możesz określić opcje, takie jak tytuł ekranu, dla każdego ekranu we właściwości options danego ekranu. Każda definicja ekranu musi również zawierać właściwość screen, która jest komponentem React lub innym navigatorem.

Wewnątrz każdego komponentu ekranu możesz użyć hooka useNavigation aby uzyskać obiekt navigation, który posiada różne metody do łączenia z innymi ekranami. Na przykład możesz użyć navigation.navigate aby przejść do ekranu Profile:

tsx

import {useNavigation} from '@react-navigation/native';

function HomeScreen() {
  const navigation = useNavigation();

  return (
    <Button
      title="Go to Jane's profile"
      onPress={() =>
        navigation.navigate('Profile', {name: 'Jane'})
      }
    />
  );
}

function ProfileScreen({route}) {
  return <Text>This is {route.params.name}'s profile</Text>;
}

Ten navigator typu native-stack używa natywnych API: UINavigationController na iOS i Fragment na Androidzie, dzięki czemu nawigacja zbudowana za pomocą createNativeStackNavigator będzie zachowywać się identycznie i mieć podobne charakterystyki wydajnościowe jak aplikacje zbudowane natywnie na tych API.

React Navigation posiada również pakiety dla różnych rodzajów navigatorów takich jak zakładki i szuflada. Możesz ich użyć do implementacji różnych wzorców w swojej aplikacji.

Pełne wprowadzenie do React Navigation znajdziesz w przewodniku rozpoczynającym pracę z React Navigation.