Kako se rukuje navigacijom u React Native-u s reakcijom-navigacijom 5

React-navigation je navigacijska knjižnica koja mi pada na pamet kad govorimo o navigaciji u React Nativeu.

Veliki sam ljubitelj ove knjižnice i to je uvijek prvo rješenje kojim se bavim navigacijom u React Nativeu. Ovo je dijelom jer ima izvanredan i lagan API i vrlo je prilagodljiv.

Pišem ovaj članak jer je verzija 5 upravo prešla iz beta u stabilnu. Dolazi s nekim promjenama značajki i novim API dizajnom koji pruža jednostavan i drugačiji način deklariranja ruta.

U ovom ćemo članku proći kroz nove API-je i pogledati načine kako ih koristiti u našim aplikacijama.

Izvorno objavljeno na saidhayani.com

Instaliranje

Način na koji instalirate response-navigation promijenio se malo u odnosu na prethodne verzije (> 4.x):

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

Instaliranje reakcije-navigacije 5 izgledat će ovako:

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

Najnovije verzije reakcije-navigacije koriste mnoge biblioteke trećih strana kao što je reaktivni-prirodni-pokretač za animaciju i upravljanje prijelazima. Stoga uvijek morate instalirati te knjižnice.

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

Dinamični zasloni

Novi API uvodi dinamičnost u inicijaliziranje ruta. Prije se to radilo statički - u osnovi, morali smo definirati svoje rute u datoteci za konfiguraciju.

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

Novi API dolazi s dinamičkim komponentama. i učinio da navigacija bude dinamičnija.

Novi način deklariranja ruta bit će sličan sljedećem.

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

reagirati-navigacija5-demo

Ovaj novi način je dinamičan, jednostavniji za upotrebu i pomalo je sličan API-ju usmjerivača za reakcije.

Dinamičke opcije

Ovo je zajednica najtraženija značajka već dugo vremena. Uvijek sam imao problema sa starom metodom (statičnom) i bilo je jako teško dinamički promijeniti navigacijsko ponašanje.

Stara metoda => <4.x

Sa starijim verzijama reakcije-navigacije morali smo definirati statičke opcije. I nije bilo načina da se to dinamički promijeni.

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

Nova metoda (verzija 5)

React-navigacija dolazi s dinamičnom metodom koja je prilično jednostavna. Opcije možemo postaviti na bilo koji zaslon koristeći samo props.

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

zaglavlje-reakcija-navigacija

S dinamičkim opcijama mogu promijeniti naslov na temelju provjere autentičnosti. Na primjer, ako je korisnik autentificiran, mogu postaviti naslov zaslona da bude korisničko ime korisnika ili mogu promijeniti backgroundColor za zaglavlje.

Ovo je korisnije pogotovo ako koristite dinamičke teme ili ako ste spremni implementirati tamni način rada u svoju aplikaciju.

Kuke

Ovo mi je zasad najdraža značajka i štedi vrijeme. Novi API uveo je neke prilagođene udice za izvođenje određenih radnji.

Na primjer, u prethodnim verzijama, ako sam morao dobiti trenutno ime aktivnog zaslona, ​​morao sam stvoriti neke pomoćnike koji će to učiniti umjesto mene, slično kao i sljedeće.

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 } 

API kuke pomaže mi da izbjegnem sve ove stvari i olakšava mi pristup Navigacijskom API-ju s jednom linijom pomoću kuke.

Sada mogu lako doći do RouteName koristeći useRouteHook.

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

To isto možemo učiniti i s useNavigationStateKukom. Omogućuje nam pristup stanju navigacije.

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

React-navigation nudi i druge kuke, na primjer:

  • useFocuseEffect : kuka za nuspojave koja kad se učitaju zasloni vraća fokusirani zaslon
  • useLinking: obrađuje deepLinking

Toplo preporučujem da ih provjerite.

Završavati

Novi API za reakciju i navigaciju definitivno prelazi sa statičkog na dinamički. To je izvrstan smjer koji će apsolutno promijeniti način na koji upravljamo navigacijom u React Nativeu. Dinamičke rute bile su glavni zahtjev korisnika reakcijske navigacije, a ovaj novi način pomoći će nam stvoriti bolje korisničko navigacijsko iskustvo.

Ovdje možete pronaći više sadržaja o React Native

Hvala na čitanju

  • Cvrkut
  • GitHub
  • Pridružite se popisu pošte
Tražite li React Native programera za vaš projekt? Udari me .