Die Verwendung eines Stack-Navigators kann Ihrer App helfen, mit einem Minimum an Code von einem Bildschirm zum nächsten zu wechseln.

Wenn Sie eine React Native-App erstellen, werden Sie sie oft aus verschiedenen Bildschirmen wie Login, Home und About zusammenstellen. Anschließend müssen Sie einen Navigationsmechanismus implementieren, damit Ihre Benutzer in der App navigieren und in der richtigen Reihenfolge auf die einzelnen Bildschirme zugreifen können.

Der Zweck dieses Tutorials besteht darin, Sie durch den Prozess der Einrichtung eines Navigationssystems in Ihrer React Native-Anwendung zu führen. Dazu gehört das Installieren der Bibliothek, das Hinzufügen Ihrer Bildschirme zum Stack-Navigator und das Verbinden der Bildschirme innerhalb jeder Ihrer Komponenten.

Bevor Sie beginnen

Um diesem Tutorial auf Ihrem lokalen Computer zu folgen, müssen Sie Folgendes installiert haben:

  • Node.js v10 oder höher
  • Xcode oder Android-Studio (eingerichtet, um den Emulator auszuführen)
  • Native CLI reagieren
instagram viewer

Eine Schritt-für-Schritt-Anleitung zum Einrichten Ihrer React Native-Entwicklungsumgebung finden Sie im offizielle React Native Einrichtungsdokumentation.

Bevor Sie sich mit der Implementierung der Navigation in unserer React Native-App befassen, wollen wir verstehen, wie der Stack-Navigationsmechanismus in React Native funktioniert.

Verstehen, wie die Stack-Navigation funktioniert

Stellen Sie sich vor, Ihre React Native-Anwendung ist ein Stack. Anfangs haben Sie auf diesem Stack Heim, das ist der erste Bildschirm, der angezeigt wird, wenn Sie die App öffnen.

Wenn Sie zu navigieren würden Um Bildschirm aus der Heim Bildschirm, würde die App drücken Um auf den Stapel, so dass es oben sitzt Heim. In ähnlicher Weise schiebt die App jeden neuen Bildschirm, zu dem Sie navigieren, auf den Stapel.

Wenn Sie jetzt zum vorherigen Bildschirm zurückkehren möchten, öffnet die App Ihren aktuellen Bildschirm aus dem Stapel und zeigt Ihnen den darunter liegenden. Dieses Verhalten ähnelt dem, was passiert, wenn Sie in Ihrem Webbrowser auf das Symbol "Zurück" klicken.

Mit einem klaren Verständnis des Stack-Navigationsmechanismus ist es jetzt an der Zeit, ihn in einer React Native-App einzurichten.

1. Installieren Sie React Navigation für native Apps

Installieren Sie zunächst die Navigationspaket reagieren für native Apps in Ihrem React Native-Projekt, indem Sie diesen Befehl auf einem Terminal ausführen:

npm ich @reagieren-Navigation/einheimisch

Das Paket, das Sie gerade installiert haben, erfordert Native Stack reagieren Und Reagieren Sie auf native Bildschirme richtig zu laufen. Um RN Stack zu installieren, führen Sie Folgendes aus:

npm ich @reagieren-Navigation/einheimisch-Stapel

Führen Sie Folgendes aus, um die zweite zu installieren:

npm ich reagiere-einheimisch-Bildschirme

Jetzt haben Sie alles, was Sie brauchen, um mit der Erstellung des Navigationsmechanismus in Ihrer Anwendung zu beginnen. Der nächste Schritt besteht darin, die Bildschirme einzurichten.

2. Richten Sie den Bildschirm in Ihrer React Native App ein

In diesem Beispiel erstellen wir nur zwei Bildschirme – den Startbildschirm und den Info-Bildschirm.

Erstellen Sie einen Ordner mit dem Namen Bildschirme im Stammverzeichnis Ihrer Anwendung. Erstellen Sie anschließend zwei Dateien mit den Namen HomeScreen.js und AboutScreen.js im Verzeichnis Bildschirme.

Was Sie Ihrer HomeScreen.js-Datei hinzufügen sollten

Öffnen Sie die Datei HomeScreen.js und importieren Sie zunächst Folgendes:

importieren * als Reagieren aus'reagieren';
importieren {Text, Ansicht, StyleSheet, TouchableOpacity} aus'reaktionsnativ';
importieren { useState } aus'reagieren'

Erstellen Sie als Nächstes die Funktionskomponente HomeScreen und greifen Sie über die Objektdekonstruktion auf das Navigationsobjekt zu (gem Best Practices reagieren), geben Sie dann einen Titel und eine Schaltfläche zum Navigieren zum About-Bildschirm zurück:

ExportStandardFunktionStartbildschirm({Navigation}) { 
zurückkehren ( 
<SichtStil={styles.container}>
<TextStil={stile.paragraph}> Startbildschirm Text>
 Titel="Gehe zu Über"
 onPress={() => navigation.navigate('ÜberBildschirm')} 
 /> 
Sicht>
 );
}

Hier weisen wir React Native an, zu navigieren Um wenn ein Benutzer die Taste drückt. In diesem Fall übergeben wir keine Daten an den Bildschirm. Aber angenommen, Sie wollen Daten an die Funktion übergeben; So würden Sie vorgehen:

ExportStandardFunktionStartbildschirm({Navigation}) { 
konst Daten = { Webseiten-Name: "Johns Tech" }
zurückkehren ( 
<SichtStil={styles.container}>
// Hier kommt Text rein 
 Titel="Gehe zu Über"
 onPress={() => navigation.navigate('ÜberBildschirm', Daten)} 
 /> 
Sicht>
 );
}

Wenn Sie jetzt die Taste drücken, übergibt dieser Code die Daten an den nächsten Bildschirm. Um. Im Inneren des AboutScreen.js Datei können Sie auf die Daten der Route zugreifen und sie auf der Benutzeroberfläche anzeigen.

Was Sie Ihrer AboutScreen.js-Datei hinzufügen sollten

Öffnen Sie die Datei AboutScreen.js und importieren Sie zunächst die folgenden Abhängigkeiten:

importieren * als Reagieren aus'reagieren';
importieren { Text, Ansicht, Stylesheet, Schaltfläche } aus'reaktionsnativ';

Als nächstes erstellen Sie die AboutScreen funktionale Komponente, die Daten aus dem übernimmt route.params -Eigenschaft und gibt die Daten in der Benutzeroberfläche zurück:

ExportStandardFunktionAboutScreen({Route}) { 
lassen dataObj = route.params
zurückkehren ( 
<SichtStil={styles.container}>
<TextStil={stile.paragraph}>
 Das Ist der Info-Bildschirm von {dataObj.websiteName} 
Text>
Sicht>
 );
}

Wie Sie sich erinnern, haben wir im genannten Datenobjekt eine einzelne Eigenschaft angegeben Webseiten-Name, die wir jetzt innerhalb der rendern Komponente. Sie können dem Objekt beliebig viele Eigenschaften hinzufügen und innerhalb der Zielbildschirmkomponente darauf zugreifen.

Der nächste Schritt besteht darin, unseren Stack-Navigator mit den beiden Bildschirmen einzurichten.

3. Verbindung der Bildschirme mit dem Stack Navigator

Beginnen Sie in App.js mit dem Importieren der folgenden Abhängigkeiten:

importieren * als Reagieren aus'reagieren';
importieren Startbildschirm aus'./screens/HomeScreen'
importieren AboutScreen aus'./screens/AboutScreen'
importieren { NavigationsContainer } aus"@react-navigation/native"
importieren { createNativeStackNavigator } aus"@react-navigation/native-stack"

In den Zeilen zwei und drei haben wir die beiden gerade erstellten Bildschirme importiert. Dann haben wir importiert NavigationsContainer

aus @react-navigation/native Und createNativeStackNavigator aus @react-navigation/native-stack um uns beim Anschließen der Bildschirme zu helfen.

Als nächstes anrufen createNativeStackNavigator um den Stack abzurufen:

konst Stack = createNativeStackNavigator()

Auf diese Weise können wir die Bildschirme, zwischen denen Sie in Ihrer App wechseln möchten, „stapeln“.

Erstellen Sie die App-Komponentenfunktion und geben Sie beide Bildschirme in der zurück Wie nachfolgend dargestellt. Achten Sie darauf, es in die einzuwickeln oder es geht nicht:

ExportStandardFunktionApp() { 
zurückkehren ( 
<NavigationsContainer>
<Stapel. Navigator>
<Stapel. BildschirmName="Startbildschirm"Komponente = {Startbildschirm} />
<Stapel. BildschirmName="Über Bildschirm"Komponente = {AboutScreen} />
Stapel. Navigator>
NavigationsContainer>
 );
}

Dieser Code platziert den HomeScreen-Bildschirm oben auf dem Stapel, was bedeutet, dass die App zuerst die Home-Komponente rendert, wenn sie fertig geladen ist.

Jetzt ist alles eingestellt. Sie können die App testen, indem Sie auf klicken Gehen Sie zu Über Schaltfläche auf der Home-Benutzeroberfläche. Dies sollte Sie weiterleiten Um, und Sie werden die finden Webseiten-Name Eigenschaft, die in der Benutzeroberfläche angezeigt wird:

2 Bilder

Das Beste an der Verwendung von React Navigation for Native ist, dass es so einfach einzurichten und zu verwenden ist. Es erfordert keine zusätzlichen Konfigurationen (außer den erforderlichen Bibliotheken, die Sie installiert haben), und Sie können auch eine Verbindung herstellen verschiedene Arten von Paywalls (wenn Sie beabsichtigen, eine abonnementbasierte App zu erstellen).

Erfahren Sie mehr über React Native

React Native ist ein plattformübergreifendes Framework zum Erstellen von Anwendungen, die auf Android- und iOS-Geräten ausgeführt werden. Es gibt so viel über React Native zu lernen, und wenn Sie neu in der Verwendung des Frameworks sind, sollten Sie damit beginnen, die Grundlagen zu lernen.