Erfahren Sie, wie Sie mithilfe der React Navigation-Bibliothek ein solides Navigationssystem für Ihre React Native-App erstellen können.

Mobile Apps sollten über ein Navigationssystem verfügen, das Benutzer mühelos durch verschiedene Bildschirme und Funktionen führt.

React Navigation, eine leistungsstarke und flexible Navigationsbibliothek für React Native, kann Ihnen dabei helfen, dieses Erlebnis zu schaffen. Indem Sie seine Fähigkeiten nutzen, können Sie mühelos ein großartiges mobiles Navigationssystem konstruieren.

Installieren der React Navigation Library

React Navigation bietet drei Hauptnavigationsmuster, nämlich die Stapel-, Tab- und Schubladennavigation zum Aufbau eines Navigationssystems. Diese Navigationsmuster bieten einen Rahmen für die Organisation und Verwaltung der Navigation zwischen verschiedenen Bildschirmen innerhalb Ihrer App.

Um mit der Verwendung von React Navigation zu beginnen, installieren Sie die Bibliothek und ihre erforderlichen Abhängigkeiten:

npm install @react-navigation/native
npm installiere React-Native-Screens React-Native-Safe-Area-Context
instagram viewer

Einrichten eines Navigators

Jeder Navigator in React Navigation lebt in seiner eigenen separaten Bibliothek. Um einen der Navigatoren verwenden zu können, müssen Sie ihn einzeln installieren.

Beim Aufbau eines Navigationssystems für Ihre mobile App ist eine gut durchdachte Projektstruktur hilfreich. Eine gute Vorgehensweise besteht darin, eine zu erstellen src Ordner im Stammverzeichnis Ihres Projekts. In diesem Ordner sollte sich eine befinden Bildschirme Ordner. Dies dient dazu, Ihre Bildschirmkomponenten von anderen Komponenten zu trennen.

Sie schreiben den Code, um das Navigationsmuster einzurichten, das Sie in Ihrem Projekt verwenden App.js Datei.

Erstellen eines Navigators innerhalb des App.js Datei ist aus mehreren Gründen eine bewährte Methode:

  • Der App.js Die Datei ist normalerweise die Komponente der obersten Ebene in einer React Native-App. Durch die Definition des Navigators in dieser Datei wird sichergestellt, dass sich die Navigationshierarchie auf der höchsten Ebene Ihres Komponentenbaums befindet und durchgehend zugänglich ist.
  • Platzieren des Navigators im App.js Mit der Datei können Sie ganz einfach auf den App-weiten Status und Requisiten zugreifen und diese an die Bildschirme im Navigator weitergeben.
  • Reagieren Sie auf die Navigation NavigationContainer Bietet den notwendigen Kontext für die Navigation und befindet sich normalerweise im Inneren App.js. Indem Sie den Navigator in derselben Datei platzieren, können Sie ihn problemlos in integrieren NavigationContainer.

Stack-Navigator

Der Stack Navigator ist das beliebteste Navigationsmuster innerhalb der React Navigation-Bibliothek. Es verwendet eine Stapeldatenstruktur, bei der jeder Bildschirm eine völlig andere Komponente darstellt und über dem vorherigen gestapelt wird.

Wenn ein neuer Bildschirm oben auf den Stapel geschoben wird, wird er zum aktiven Bildschirm und der vorherige Bildschirm wird darunter geworfen. Dadurch können Benutzer wie beim Navigationsfluss einer Website im Stapel hin und her navigieren. Du kannst Richten Sie den Stapelnavigator so ein, dass er von einem Bildschirm zum anderen wechselt.

Zum Beispiel:

importieren Reagieren aus'reagieren';
importieren { NavigationContainer } aus'@react-navigation/native';
importieren {createStackNavigator} aus'@react-navigation/stack';
// Importieren Sie Ihre Bildschirmkomponenten
importieren Startbildschirm aus'./screens/HomeScreen';
importieren DetailsBildschirm aus'./screens/DetailsScreen';


const Stack = createStackNavigator();


const App = () => {
zurückkehren (


"Heim" Komponente={HomeScreen} />
"Einzelheiten" Komponente={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
ExportStandard App;

Der obige Codeblock erstellt eine Stack Navigator-Komponente mit createStackNavigator() aus der Navigationsbibliothek.

In diesem Beispiel verfügt der Stack Navigator über zwei Bildschirme: Heim Und Einzelheiten.

Installieren Sie nun den Stack Navigator:

npm install @react-navigation/stack

Innen Startbildschirm, du kannst den... benutzen Navigation Objekt zum Testen des Stack Navigators:

importieren { StyleSheet, Ansicht, Schaltfläche } aus„react-native“;
importieren Reagieren aus"reagieren";
const HomeScreen = ({ Navigation }) => {
zurückkehren (

 Titel=„Navigieren zu …“
 onPress={() => navigation.navigate(„DetailScreen“)}
 />
 </View>
 );
};


ExportStandard Startbildschirm;
const Styles = StyleSheet.create({});
2 Bilder

Beachten Sie, wie der Stack Navigator automatisch eine Pfeilschaltfläche erstellt, um die Rücknavigation zu den vorherigen Bildschirmen zu ermöglichen.

Tab-Navigator

In manchen Situationen bietet ein Hin- und Her-Navigationssystem wie der Stack Navigator kein tolles Erlebnis. Für diese Fälle ist ein Tab-Navigator besser geeignet. Es zeigt dem Benutzer die verfügbaren Navigationsbildschirme im Voraus an und kann einfacher zu verwenden sein. wie eine Web-Navigationsleiste.

Installieren Sie zunächst die @react-navigation/bottom-tabs Bibliothek verwenden der NPM-Paketmanager.

Mit createBottomNavigator()können Sie eine Instanz des Tab Navigators erstellen, wie Sie es mit dem Stack Navigator getan haben:

importieren {createBottomTabNavigator} aus'@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();

Anschließend definieren Sie die gewünschten Bildschirme als Registerkarten im Navigator und NavigationContainer:

ExportStandardFunktionApp() {
zurückkehren (


 name="Heim"
 Komponente={HomeScreen}
 Optionen={{ Titel: "Heim" }}
 />
 name="Profil"
 Komponente={ProfileScreen}
 Optionen={{ Titel: "Profil" }}
 />
 name="Einzelheiten"
 Komponente={DetailScreen}
 Optionen={{ Titel: "Einzelheiten" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

Wenn Sie Ihre App ausführen, sollten Sie unten einen Tab-Navigator mit Ihren definierten Bildschirmen sehen.

3 Bilder

Du könntest das verwenden tabBarPosition oOption zum Positionieren des Navigators am Spitze, Rechts, links, oder Unterseite (Standard).

Schubladennavigator

Schubladennavigatoren oder Schubladen sind ein gängiges Navigationsmuster in mobilen Anwendungen. Sie können die Schubladen durch Wischen oder Tippen auf eine Schaltfläche öffnen. Dadurch wird die Schublade von der Seite des Bildschirms eingeschoben und gibt den Inhalt frei.

2 Bilder

Um den Drawer Navigator zu verwenden, installieren Sie ihn zusammen mit React-Native-Gesture-Handler Und React-Native-Reanimation:

npm install @react-navigation/drawer
npm install React-Native-Gesture-Handler React-Native-Reanimated

Sie müssen auch reanimated in Ihrem konfigurieren babel.config.js Datei:

Modul.exports = {
 Voreinstellungen: [„babel-preset-expo“],
 Plugins: [„react-native-reanimated/plugin“],
};

Hier ist ein Beispiel für die Einrichtung eines Schubladennavigators:

importieren„react-native-gesture-handler“; // Dieser Import muss oben stehen
importieren {Ansicht, Text, Schaltfläche} aus„react-native“;
importieren {createDrawerNavigator} aus„@react-navigation/drawer“;
importieren { NavigationContainer } aus„@react-navigation/native“;


const Drawer = createDrawerNavigator();


const Schubladeninhalt = ({ Navigation }) => {
zurückkehren (
biegen: 1, alignItems: "Center", justifyContent: "Center" }}>
Schriftgröße: 24, Schriftartgewicht: "deutlich" }}>
 Willkommen in der Schublade
 </Text>

 Dies ist ein zusätzlicher Inhalt, den Sie anzeigen können In die Schublade.
 </Text>


const App = () => (

 initialRouteName="Heim"
 DrawerContent={(props) => <Schubladeninhalt {...Requisiten} />}
 >
 {/* Ihre anderen Bildschirme hier */}
 </Drawer.Navigator>
 </NavigationContainer>
);
ExportStandard App;

In diesem Beispiel ist die Schubladeninhalt Die Komponente wird als übergeben Schubladeninhalt prop zu createDrawerNavigator. Im Inneren Schubladeninhalt Mit der Komponente können Sie den Inhalt so anpassen, dass die gewünschten Informationen mithilfe von Textkomponenten oder anderen Elementen und Stilen angezeigt werden.

Tab-Navigatoren sind statisch und immer sichtbar. Dies ist nicht immer das Beste, da die Tabs Teile des Bildschirms blockieren und den Fokus vom Hauptbildschirm ablenken können. Sie können Schubladen als dynamischen Tab-Navigator verwenden und innerhalb der Schubladen ein Navigationsmenü erstellen. Benutzer können dann die Schublade öffnen, um ein Navigationsmenü zu finden.

Sie können die Schublade auch verwenden, um zusätzliche Inhalte wie eine Suchleiste, ein Benutzerprofil, Kontextinformationen oder alles anzuzeigen, was keine Vollbildansicht erfordert.

Berücksichtigen Sie diese Best Practices, um den Drawer Navigator optimal zu nutzen:

  • Vermeiden Sie es, die Schublade mit zu vielen Optionen zu überfordern, und konzentrieren Sie sich auf die Darstellung der relevantesten und am häufigsten verwendeten Funktionen.
  • Kategorisieren Sie verwandte Elemente logisch und intuitiv, damit Benutzer schnell finden, wonach sie suchen.
  • Verwenden Sie Symbole oder visuelle Indikatoren, um Benutzern zu helfen, den Zweck jedes Artikels in der Schublade zu verstehen.

Übergeben von Daten mit Navigationsstützen

React Navigation bietet einen leistungsstarken Mechanismus, mit dem Sie Daten über Navigationselemente weiterleiten können.

Stellen Sie sich ein Szenario vor, in dem Sie eine Liste von Elementen auf einem Bildschirm haben und wenn ein Benutzer ein Element auswählt, möchten Sie die entsprechenden Daten an einen anderen Bildschirm übergeben.

Zunächst müssen Sie Ihre Navigationsstruktur definieren. Nun, um Daten von zu übergeben Startbildschirm zu einem DetailScreen wenn ein Element ausgewählt ist, im Inneren Startbildschirm Definieren Sie eine Funktion, die die Navigation übernimmt und die Daten einschließt, die Sie übergeben möchten.

importieren Reagieren aus'reagieren';
importieren {Ansicht, Text, Schaltfläche} aus'react-native';
const HomeScreen = ({ Navigation }) => {
const handleItemPress = (Artikel) => {
 navigation.navigate('DetailScreen', { Artikel });
 };


zurückkehren (

Aufführen von Artikel</Text>
ExportStandard Startbildschirm;

Der handleItemPress Funktion nutzt die navigation.navigate Methode zum Navigieren zum DetailScreen während die ausgewählten Elementdaten als Parameter im zweiten Argument übergeben werden.

Um auf die übergebenen Daten innerhalb der zugreifen zu können DetailScreen Komponente benötigen Sie die Navigation Stütze:

importieren Reagieren aus'reagieren';
importieren {Ansicht, Text} aus'react-native';
const DetailScreen = ({ Navigation }) => {
const item = navigation.getParam('Artikel', '');


zurückkehren (

Detailbildschirm</Text>
{item}</Text>
 </View>
 );
};
ExportStandard DetailScreen;

Hier das DetailScreen Komponente verwendet navigation.getParam um das übergebene Element aus den Navigations-Requisiten abzurufen. In diesem Beispiel wird ein Standardwert einer leeren Zeichenfolge festgelegt, falls die Daten nicht verfügbar sind. Auf diese Weise stürzt Ihre App beim Rendern nicht ab.

Abhängig von der Komplexität Ihrer App, Sie können die Verwendung von Zustandsverwaltungsbibliotheken wie Redux erkunden oder die Kontext-API zum globalen Verwalten und Teilen von Daten.

Organisieren Sie Ihren Navigationscode

Durch die richtige Organisation Ihres Navigationscodes können Sie eine skalierbare und kollaborative React Native-App erstellen. Sie können dies erreichen, indem Sie die Navigationslogik in überschaubare Module aufteilen. Dies erleichtert das Lesen und Verstehen.

Auf diese Weise können Sie sicher sein, eine nahtlose Navigation für Ihre Benutzer zu schaffen und gleichzeitig die Entwicklungserfahrung zu genießen.