Tab Navigator

Wechseln wir zum Tab Navigator, der das Wechseln zwischen Bildschirmen oder Tabs erleichtert. Er befindet sich typischerweise am unteren Rand des Bildschirms.

Stellen Sie zunächst sicher, dass Sie React Navigation installiert haben, falls Sie dies noch nicht getan haben:

Nun erstellen wir drei Bildschirme: HomeScreen, ProfileScreen und SettingsScreen.

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

In diesem Beispiel haben wir die Navigation mit dem Tab Navigator in App.js eingerichtet. Jeder Bildschirm wird als separater Tab im Tab Navigator hinzugefügt. Wir können zwischen den Bildschirmen wechseln, indem wir auf den entsprechenden Tab am unteren Bildschirmrand tippen.

Lassen Sie uns jede Komponente einzeln analysieren

Schritt 1

import -Anweisungen: Notwendige Module von React und React Navigation werden importiert, ebenso wie die benutzerdefinierten Bildschirmkomponenten (HomeScreen, ProfileScreen und SettingsScreen).

Schritt 2

Mit createBottomTabNavigator() wird ein Tab-Navigator erstellt.

Schritt 3

Definieren Sie die App-Komponente: Die App-Komponente rendert den Navigationscontainer und den Tab-Navigator.

Schritt 4

Der NavigationContainer-Komponente umschließt die gesamte Navigationsstruktur.

Schritt 5

Innerhalb des NavigationContainer definiert die Tab.Navigator-Komponente die Struktur der Tab-Navigation.

Schritt 6

Tab.Screen-Komponenten werden dem Tab-Navigator hinzugefügt. Jeder Bildschirm hat einen eindeutigen Namen und ist mit einer Komponente verknüpft.