Sådan håndteres navigation i React Native med react-navigation 5

React-navigation er det navigationsbibliotek, der kommer til mig, når vi taler om navigation i React Native.

Jeg er en stor fan af dette bibliotek, og det er altid den første løsning, jeg bruger til at håndtere navigation i React Native. Dette er delvis fordi det har en fantastisk og nem API og er meget tilpasselig.

Jeg skriver denne artikel, fordi version 5 lige gik fra beta til stabil. Det kommer med nogle funktionsændringer og et nyt API-design, der giver en enkel og anderledes måde at erklære ruter på.

I denne artikel skal vi gennemgå de nye API'er og se på måder at bruge dem i vores applikationer.

Oprindeligt offentliggjort på saidhayani.com

Installation

Den måde, du installerer reaktionsnavigation på, har ændret sig en lille indsats i forhold til tidligere versioner (> 4.x):

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

Installation af react-navigation 5 vil se sådan ud:

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

De nyeste versioner af react-navigation bruger mange tredjepartsbiblioteker som react-native-gesture-handler til animation og håndtering af overgange. Så du skal altid installere disse biblioteker.

// 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 

Dynamiske skærme

Den nye API introducerer dynamik i initialisering af ruter. Tidligere blev det gjort statisk - grundlæggende måtte vi definere vores ruter i en konfigurationsfil.

// @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); 

Den nye API leveres med dynamiske komponenter. og gjorde navigationen mere dynamisk.

Den nye måde at erklære ruterne på vil ligne på følgende måde.

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  ) } 

reager-navigation5-demo

Denne nye måde er dynamisk, nemmere at bruge og ligner lidt reagerer-router API.

Dynamiske muligheder

Dette har været den mest efterspurgte funktion af samfundet i lang tid. Jeg havde altid problemer med den gamle metode (statisk), og det var virkelig svært at ændre navigationsadfærden dynamisk.

Den gamle metode => <4.x

Med ældre versioner af react-navigation måtte vi definere statiske muligheder. Og der var ingen måde at ændre dette dynamisk på.

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

Den nye metode (version 5)

React-navigation kommer med en dynamisk metode, der er ret enkel. Vi kan indstille indstillingerne til enhver skærm ved hjælp af bare 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

Med dynamiske indstillinger kan jeg ændre titlen baseret på godkendelse. For eksempel, hvis brugeren er godkendt, kan jeg indstille skærmtitlen til at være brugerens brugernavn, eller jeg kan ændre baggrundsfarven for overskriften.

Dette er mere nyttigt, især hvis du bruger dynamiske temaer, eller hvis du er villig til at implementere mørk tilstand i din app.

Kroge

Dette er min yndlingsfunktion hidtil, og det er en tidsbesparende. Den nye API introducerede nogle brugerdefinerede kroge til at udføre bestemte handlinger.

I tidligere versioner, hvis jeg for eksempel skulle få det aktuelle navn på den aktive skærm, var jeg nødt til at oprette nogle hjælpere til at gøre det for mig stort set som følgende.

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 } 

Hooks API hjælper mig med at undgå alle disse ting og gør det lettere for mig at få adgang til Navigation API med en enkelt linje ved hjælp af en krog.

Nu kan jeg nemt få RouteName ved hjælp af useRouteHook.

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

Vi kan gøre det samme med useNavigationStatekrogen. Det giver os adgang til navigeringstilstanden.

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

React-navigation tilbyder også andre kroge, for eksempel:

  • useFocuseEffect : en krog til bivirkning, der, når skærmene er indlæst, returnerer den fokuserede skærm
  • useLinking: håndterer deepLinking

Jeg anbefaler stærkt, at du tjekker dem ud.

Afslutter

Den nye API for reaktionsnavigation bevæger sig bestemt fra statisk til dynamisk. Det er en fantastisk retning, der absolut vil ændre den måde, vi håndterer navigation på React Native. Dynamiske ruter var en vigtig anmodning fra brugere af reageringsnavigation, og denne nye måde hjælper os med at skabe en bedre brugernavigationsoplevelse.

Du kan finde mere indhold om React Native her

Tak for læsningen

  • Twitter
  • GitHub
  • Deltag i mail-listen
Leder du efter en React Native-udvikler til dit projekt? Slå mig op .