Umgang mit der Navigation in React Native mit React-Navigation 5

React-Navigation ist die Navigationsbibliothek, die mir einfällt, wenn wir über die Navigation in React Native sprechen.

Ich bin ein großer Fan dieser Bibliothek und es ist immer die erste Lösung, die ich für die Navigation in React Native verwende. Dies liegt zum Teil daran, dass es eine fantastische und einfache API hat und sehr anpassbar ist.

Ich schreibe diesen Artikel, weil Version 5 gerade von Beta auf Stable umgestellt wurde. Es enthält einige Funktionsänderungen und ein neues API-Design, das eine einfache und andere Möglichkeit zum Deklarieren von Routen bietet.

In diesem Artikel werden wir die neuen APIs durchgehen und nach Möglichkeiten suchen, sie in unseren Anwendungen zu verwenden.

Ursprünglich auf saidhayani.com veröffentlicht

Installieren

Die Art und Weise, wie Sie React-Navigation installieren, hat sich im Vergleich zu früheren Versionen (> 4.x) geringfügig geändert:

// > 4.x verions yarn add react-navigation 

Die Installation von React-Navigation 5 sieht folgendermaßen aus:

// yarn yarn add @react-navigation/native // npm npm install @react-navigation/native 

Die neuesten Versionen von React-Navigation verwenden viele Bibliotheken von Drittanbietern wie den React-Native-Gesture-Handler für Animationen und die Bearbeitung von Übergängen. Sie müssen diese Bibliotheken also immer installieren.

// yarn yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view // npm npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view 

Dynamische Bildschirme

Die neue API sorgt für Dynamik bei der Initialisierung von Routen. Bisher wurde dies statisch durchgeführt - im Grunde mussten wir unsere Routen in einer Konfigurationsdatei definieren.

// @flow import React from "react"; import { createAppContainer, createSwitchNavigator } from "react-navigation"; import { createStackNavigator } from "react-navigation-stack"; /** ---------Screens----------- */ // import LaunchScreen from "../Containers/LaunchScreen"; import HomeScreen from "../Containers/HomeScreen"; import ProfileScreen from "../Containers/ProfileScreen"; import LoginScreen from "../Containers/LoginScreen"; const StackNavigator = createStackNavigator( { initialRouteName: "Home" }, { Home: { screen: HomeScreen }, Login: { screen: LoginScreen, headerMode: "none", }, Profile: { screen: ProfileScreen } ); export default createAppContainer(StackNavigator); 

Die neue API enthält dynamische Komponenten. und machte die Navigation dynamischer.

Die neue Methode zum Deklarieren der Routen ähnelt der folgenden.

import React from "react" import { SafeAreaView, StyleSheet, View, Text, StatusBar } from "react-native" import { NavigationContainer } from "@react-navigation/native" import { createStackNavigator } from "@react-navigation/stack" const App: () => React$Node = () => { return (       ) } const Stack = createStackNavigator() const AppNavigation = () => { return (      ) } const HomeScreen = () => { return (  Home Screen  ) } 

React-Navigation5-Demo

Diese neue Methode ist dynamisch, einfacher zu verwenden und ähnelt der React-Router-API.

Dynamische Optionen

Dies ist seit langem die am häufigsten nachgefragte Funktion der Community. Ich hatte immer Probleme mit der alten Methode (statisch) und es war wirklich schwierig, das Navigationsverhalten dynamisch zu ändern.

Die alte Methode => <4.x

Bei älteren Versionen der React-Navigation mussten wir statische Optionen definieren. Und es gab keine Möglichkeit, dies dynamisch zu ändern.

 static navigationOptions = { title: "Sign In", header: null, mode: "modal", headerMode: "none" }; 

Die neue Methode (Version 5)

Die Reaktionsnavigation wird mit einer dynamischen Methode geliefert, die recht einfach ist. Wir können die Optionen mit nur auf jeden Bildschirm einstellen props.

const AppNavigation = ({}) => { let auth = { authenticated: true, user: { email: "[email protected]", username: "John", }, } let ProfileScreenTitle = auth.authenticated ? auth.user.username : "Profile" return (        ) } 

React-Navigation-Header

Mit dynamischen Optionen kann ich den Titel basierend auf der Authentifizierung ändern. Wenn der Benutzer beispielsweise authentifiziert ist, kann ich den Bildschirmtitel als Benutzernamen des Benutzers festlegen oder die Hintergrundfarbe für den Header ändern.

Dies ist besonders dann nützlich, wenn Sie dynamische Themen verwenden oder bereit sind, den Dunkelmodus in Ihrer App zu implementieren.

Haken

Dies ist meine bisherige Lieblingsfunktion und spart Zeit. Die neue API führte einige benutzerdefinierte Hooks ein, um bestimmte Aktionen auszuführen.

Wenn ich in früheren Versionen beispielsweise den aktuellen Namen des aktiven Bildschirms abrufen musste, musste ich einige Helfer erstellen, um dies für mich zu tun, ähnlich wie im Folgenden.

export function getCurrentRouteName(): string | null { const tag = "[getCurrentRouteNameSync] " const navState = getStore().getState().nav const currentRoute = getActiveRouteState(navState) console.log(tag + " currentRoute > ", currentRoute) return currentRoute && currentRoute.routeName ? currentRoute.routeName : null } 

Die Hooks-API hilft mir, all diese Dinge zu vermeiden, und erleichtert mir den Zugriff auf die Navigations-API mit einer einzigen Zeile über einen Hook.

Jetzt kann ich den Routennamen einfach mit useRouteHook abrufen .

import { useRoute } from "@react-navigation/native" const AboutScreen = ({ navigation }) => { const route = useRoute() return (  {/* Display the RouteName here */} {route.name}  ) } 

Mit dem useNavigationStateHook können wir dasselbe machen . Es gibt uns Zugriff auf den Navigationsstatus.

const navigationState = useNavigationState(state => state) let index = navigationState.index let routes = navigationState.routes.length console.log(index) console.log(routes) 

React-Navigation bietet auch andere Hooks, zum Beispiel:

  • useFocuseEffect : Ein Nebeneffekt-Hook, der beim Laden der Bildschirme den fokussierten Bildschirm zurückgibt
  • useLinking: behandelt deepLinking

Ich empfehle Ihnen dringend, sie sich anzusehen.

Einpacken

Die neue React-Navigation-API wechselt definitiv von statisch zu dynamisch. Es ist eine großartige Richtung, die die Art und Weise, wie wir mit der Navigation in React Native umgehen, absolut verändern wird. Dynamische Routen waren eine wichtige Anforderung von Benutzern der Reaktionsnavigation, und diese neue Methode wird uns helfen, eine bessere Benutzer-Navigationserfahrung zu schaffen.

Weitere Inhalte zu React Native finden Sie hier

Danke fürs Lesen

  • Twitter
  • GitHub
  • Treten Sie der Mail-Liste bei
Suchen Sie einen React Native-Entwickler für Ihr Projekt? Schlagen Sie mich auf .