Stack-Navigator

Lassen Sie uns eine einfache React Native-App mit zwei Bildschirmen erstellen, indem wir den Stack Navigator von React Navigation verwenden.

Stellen Sie zunächst sicher, dass Sie React Navigation installiert haben:

Nun erstellen wir zwei Bildschirme: HomeScreen und DetailsScreen.

Nun richten wir die Navigation in unserer App.js mit dem Stack Navigator ein:

Wir haben einen einfachen Stack Navigator mit React Navigation eingerichtet.

Lassen Sie uns aufschlüsseln, was jeder Teil macht:

Schritt 1

import-Anweisungen: Notwendige Module aus React und React Navigation sowie benutzerdefinierte Bildschirmkomponenten (HomeScreen und DetailsScreen) importieren.

Schritt 2

Erstellen Sie einen Stack-Navigator mit createNativeStackNavigator().

Schritt 3

Definieren Sie die App-Komponente, die den Navigationscontainer und den Stapelnavigator rendert.

Schritt 4

Geben Sie die NavigationContainer-Komponente zurück, die die gesamte Navigationsstruktur umschließt.

Schritt 5

Definieren Sie innerhalb des NavigationContainer die Stack.Navigator-Komponente, die den Stapel der Bildschirme enthält.

Schritt 6

Fügen Sie Bildschirme zum Stack hinzu, indem Sie Stack.Screen-Komponenten verwenden. Jeder Bildschirm hat einen eindeutigen Namen und ist mit einer Komponente verknüpft.