Ein vollständiger Leitfaden zum Reagieren nativer Navigation mit React Navigation

Einleitung

React Native ermöglicht die Erstellung nativer mobiler Apps mit JavaScript und React. Ein kritischer Aspekt der Entwicklung mobiler Apps ist die Navigation: Benutzer nahtlos durch verschiedene Bildschirme und Funktionen zu führen. React Navigation ist die beliebteste, community-gesteuerte Bibliothek zur Implementierung von Navigation in React Native-Anwendungen. Es bietet eine deklarative API, unterstützt Stack-, Tab- und Schubladennavigatoren und verarbeitet plattformspezifische Gesten und Übergänge. Dieses Handbuch deckt alles ab, von der Installation bis hin zu erweiterten Mustern wie Deep Linking und Authentifizierungsflüssen.

Voraussetzungen und Installation

Bevor Sie React Navigation verwenden, stellen Sie sicher, dass Sie ein React Native Projekt initialisiert haben.

Installieren von Core Packages

Installieren Sie die benötigten Pakete per npm oder garn. Die Kernbibliothek und ihre Hauptabhängigkeiten sind:

npm install @react-navigation/native

Installieren Sie dann die unterstützenden Bibliotheken, von denen React Navigation für die Bildschirmverwaltung und die Handhabung sicherer Bereiche abhängt:

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

Wenn Sie Expo verwenden, sind diese Bibliotheken bereits enthalten.Bei reinen React Native Projekten befolgen Sie die Linkanweisungen in der offiziellen Dokumentation, um sicherzustellen, dass native Module korrekt verknüpft sind (Autolinking übernimmt dies für React Native 0.60+).

Installieren Sie einen Navigator

React Navigation bietet mehrere Navigatoren. Der native Stack Navigator wird für die meisten Anwendungsfälle empfohlen:

npm install @react-navigation/native-stack

Andere Navigatoren wie unten Tabs und drawer sind separat installiert:

npm install @react-navigation/bottom-tabs
npm install @react-navigation/drawer

Kernkonzepte

React Navigation basiert auf drei Hauptbausteinen:

• NavigationContainer – die äußerste Umhüllung, die den Navigationsbaum und den Zustand verwaltet.
• Navigatoren – Komponenten, die das Navigationsmuster definieren (Stack, Tab, Schublade).
• Screens – einzelne Komponenten, die eine Ansicht oder Seite in der App darstellen.

Jedes Navigations-Setup muss in einem gewickelt werden. Dieser Container wird normalerweise am Stamm der App-Komponente platziert.

Einrichten eines Stack Navigators

Der Stack-Navigator verwaltet einen Last-in-First-Out-Stack von Bildschirmen. Er verwendet standardmäßig die Übergangsanimationen und -gesten der nativen Plattform.

Zunächst Import notwendige Module:

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

Erstellen Sie eine Stack-Navigator-Instanz:

const Stack = createNativeStackNavigator();

Definieren Sie den Navigator in Ihrer App-Komponente:

function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="Home" component={HomeScreen} />
 <Stack.Screen name="Details" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

Jede benötigt eine Stütze (für die Navigation verwendet) und eine Stütze (die React-Komponente zum Rendern).

Erstellen von Bildschirmen und Navigieren

Bildschirme sind Standard-React-Komponenten. Sie erhalten zwei wichtige Requisiten: und . Das Objekt bietet Methoden, um sich zwischen Bildschirmen zu bewegen.

function HomeScreen({ navigation }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Home Screen</Text>
 <Button
 title="Go to Details"
 onPress={() => navigation.navigate('Details')}
 />
 </View>
 );
}

Der Bildschirm Details muss die Navigationsprop nicht verwenden, es sei denn, sie muss weiter navigieren.

function DetailsScreen({ route }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Details Screen</Text>
 </View>
 );
}

Navigationsmethoden

React Navigation bietet mehrere Methoden über die prop:

• navigate(name, params) – bewegt sich zu einem Bildschirm und verwendet eine vorhandene Instanz wieder, wenn sie im Stapel existiert.
• push(name, params) – drückt immer einen neuen Bildschirm auf den Stapel, auch wenn der gleiche Bildschirm bereits im Stapel ist.
• goBack() – navigiert zum vorherigen Bildschirm im Stapel.
• replace(name, params) – ersetzt den aktuellen Bildschirm durch einen neuen, wodurch der aktuelle aus der Geschichte entfernt wird.
• reset(state) – setzt den gesamten Navigationszustand auf ein gegebenes Zustandsobjekt zurück.

Zum Beispiel, um eine neue Instanz des Details-Bildschirms zu drücken und Parameter zu übergeben:

navigation.push('Details', { itemId: 42, otherParam: 'anything' });

Parameter zwischen Bildschirmen übergeben

Die Daten können über das zweite Argument an oder an einen Bildschirm übergeben werden.

// In HomeScreen
navigation.navigate('Details', { userId: 123 });

// In DetailsScreen
function DetailsScreen({ route }) {
 const { userId } = route.params;
 return <Text>User ID: {userId}</Text>;
}

Setzen Sie Standardparameterwerte mit auf der Bildschirmkomponente:

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 initialParams={{ itemId: 0 }}
/>

Konfiguration von Navigationsoptionen

Jeder Bildschirm kann seine Kopfzeile, Tab-Symbol, Schubladen-Etikette, etc. anpassen, mit dem Prop auf oder dem Prop auf dem Navigator.

Header Customization

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 options={{
 title: 'Details',
 headerStyle: { backgroundColor: '#f4511e' },
 headerTintColor: '#fff',
 headerTitleStyle: { fontWeight: 'bold' },
 }}
/>

Dynamische Optionen können mit einer Funktion eingestellt werden, die erhält:

options={({ route }) => ({ title: route.params.name })}

Tab Navigator

Tab-Navigation ist für die Top-Level-App üblich.

npm install @react-navigation/bottom-tabs

Erstellen Sie einen Tab-Navigator und kombinieren Sie ihn mit Ihrem Stack:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function HomeTabs() {
 return (
 <Tab.Navigator>
 <Tab.Screen name="Feed" component={FeedScreen} />
 <Tab.Screen name="Profile" component={ProfileScreen} />
 </Tab.Navigator>
 );
}

Sie können den Tab-Navigator in einem Stack-Navigator verschachteln oder umgekehrt. Passen Sie Tab-Icons mit der -Prop mit an.

Schubladennavigator

Ein Schubladennavigator rutscht eine Schublade von links und zeigt Navigationselemente.

npm install @react-navigation/drawer

Beispielaufbau:

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function AppDrawer() {
 return (
 <Drawer.Navigator>
 <Drawer.Screen name="Home" component={HomeScreen} />
 <Drawer.Screen name="Settings" component={SettingsScreen} />
 </Drawer.Navigator>
 );
}

Verwenden Sie , um die Schublade programmatisch zu öffnen und zu schließen.

Verschachtelte Navigatoren

Komplexe Apps verschachteln häufig Navigatoren (z. B. einen Tab-Navigator in einem Stack-Navigator). React Navigation übernimmt das Verschachteln mit Anmut. Die -Requisition, die jedem Bildschirm zur Verfügung gestellt wird, kann Methoden auf einem übergeordneten Navigator aufrufen, wenn nötig. Verwenden Sie , um auf die Methoden des übergeordneten Navigators zuzugreifen.

Beispiel: Ein Stapel mit einem Tab-Navigator und einem Einstellungsbildschirm:

function RootStack() {
 return (
 <Stack.Navigator>
 <Stack.Screen name="Main" component={MainTabs} options={{ headerShown: false }} />
 <Stack.Screen name="Settings" component={SettingsScreen} />
 </Stack.Navigator>
 );
}

Linking und Deep Linking

React Navigation unterstützt Deep Linking, um URLs zu verwalten, die bestimmte Bildschirme öffnen.

const linking = {
 prefixes: ['myapp://', 'https://myapp.com'],
 config: {
 screens: {
 Home: 'home',
 Details: 'details/:itemId',
 },
 },
};

<NavigationContainer linking={linking}>
 {/* navigators */}
</NavigationContainer>

Dann behandeln Sie eingehende URLs. Dies ermöglicht Funktionen wie Push-Benachrichtigungen, die mit einem bestimmten Bildschirm verknüpft sind.

Authentifizierungsströme

Viele Apps erfordern eine bedingte Navigation basierend auf dem Authentifizierungszustand.

function App() {
 const [isSignedIn, setIsSignedIn] = useState(false);

 return (
 <NavigationContainer>
 {isSignedIn ? <AppNavigator /> : <AuthNavigator />}
 </NavigationContainer>
 );
}

Alternativ können Sie einen einzelnen Stapel mit bedingten Bildschirmen verwenden.Vermeiden Sie ein Flackern, indem Sie das Versprechen oder den Zustand auf dem neuesten Stand halten.

Performance und Best Practices

• Verwenden Sie native Stack Navigator (nicht ) für bessere Leistung und native Übergänge.
• React Navigation demountet versteckte Bildschirme standardmäßig für Stapelnavigatoren, aber für Tab-Navigatoren können Sie das lazy Laden konfigurieren.
• Geben Sie nur primitive Daten durch Parameter, um Serialisierungsprobleme zu vermeiden.
• Verwenden Sie oder für Bildschirmkomponenten, die häufig neu gerendert werden.
• Vermeiden Sie schwere Berechnungen während Navigationsübergängen; Offload-Arbeit mit .
• Behandeln Sie immer das Ereignis für ungespeicherte Änderungsanweisungen.

Schlussfolgerung

React Navigation bietet eine intuitive, anpassbare und performante Möglichkeit, die Navigation in React Native Apps zu verwalten. Durch das Beherrschen von Stack, Tab, Schublade und verschachtelten Navigatoren sowie Parameterübergabe, Deep Linking und Authentifizierungsflüsse können Sie robuste mobile Erlebnisse erstellen. Weitere Details finden Sie in der offiziellen React Navigation Dokumentation und dem React Native Navigation Guide. Lesen Sie auch Community-Artikel zu React Navigation Best Practices, um Ihre Implementierungen zu verfeinern.