5. Hogyan kezeljük a navigációt a React Native-ban a reagálás-navigációval

A React-navigation az a navigációs könyvtár, amely eszembe jut, amikor a navigációról beszélünk a React Native-ban.

Nagy rajongója vagyok ennek a könyvtárnak, és mindig ez az első megoldás, amelyet a React Native navigációjának kezelésére használok. Ez részben azért van, mert fantasztikus és egyszerű API-val rendelkezik, és nagyon testreszabható.

Azért írom ezt a cikket, mert az 5. verzió csak bétából stabil lett. Néhány funkcióváltozással és új API-tervvel érkezik, amely egyszerű és eltérő módot kínál az útvonalak deklarálására.

Ebben a cikkben át fogjuk járni az új API-kat, és megvizsgáljuk, hogyan lehet felhasználni őket alkalmazásainkban.

Eredetileg a saidhayani.com oldalon jelent meg

Telepítés

A reakció-navigáció telepítésének módja kissé megváltoztatta a korábbi verziókhoz (> 4.x) képest:

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

A reak-navigation 5 telepítése így fog kinézni:

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

A reakció-navigáció legújabb verziói számos harmadik fél könyvtárát használják, például az react-native-gesture-handlert az animációkhoz és az átmenetek kezeléséhez. Tehát mindig telepítenie kell ezeket a könyvtárakat.

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

Dinamikus képernyők

Az új API dinamikát vezet be az útvonalak inicializálásában. Korábban statikusan történt - alapvetően konfigurációs fájlban kellett meghatároznunk az útvonalainkat.

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

Az új API dinamikus összetevőket tartalmaz. és dinamikusabbá tette a navigációt.

Az Útvonalak bejelentésének új módja hasonló lesz a következőkhöz.

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

Ez az új mód dinamikus, egyszerűbb használni, és hasonló a reakció-router API-hoz.

Dinamikus opciók

Ez volt a közösség által régóta kért szolgáltatás. Mindig problémám volt a régi módszerrel (statikus), és nagyon nehéz volt dinamikusan megváltoztatni a navigációs viselkedést.

A régi módszer => <4.x

A reak-navigáció régebbi verzióival statikus opciókat kellett definiálnunk. És ezen nem lehetett dinamikusan változtatni.

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

Az új módszer (5. verzió)

A React-navigáció dinamikus módszerrel jön létre, ami nagyon egyszerű. Bármelyik képernyőre beállíthatjuk az opciókat a props.

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

reagál-navigáció-fejléc

Dinamikus opciókkal megváltoztathatom a címet a hitelesítés alapján. Például, ha a felhasználó hitelesített, beállíthatom a képernyő címét a felhasználó felhasználónevévé, vagy megváltoztathatom a fejléc háttérképét.

Ez különösen akkor hasznos, ha dinamikus témákat használ, vagy ha hajlandó a sötét módot megvalósítani az alkalmazásban.

Horgok

Ez a kedvenc funkcióm eddig, és időtakarékos. Az új API bevezetett néhány egyéni horgot bizonyos műveletek végrehajtására.

A korábbi verziókban például, ha meg kellett szereznem az aktív képernyő currentName-jét, akkor létre kellett hoznom néhány segítőt, hogy ezt nagyjából az alábbiakhoz hasonlóan tegyem meg számomra.

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 } 

A Hooks API segít elkerülni ezeket a dolgokat, és megkönnyíti a Navigation API egyetlen vonallal történő, horog segítségével történő elérését.

Most könnyedén megszerezhetem a RouteName-t a useRouteHook segítségével .

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

Ugyanezt tehetjük a useNavigationStateHoroggal is. Hozzáférést biztosít a navigációs állapothoz.

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

A React-navigation más kampókat is kínál, például:

  • useFocuseEffect : mellékhatású kampó, amely a képernyők betöltésekor visszatér a fókuszált képernyőhöz
  • useLinking: kezeli deepLinking

Nagyon ajánlom, hogy nézze meg őket.

Csomagolás

Az új reakció-navigációs API határozottan statikusról dinamikusra vált. Ez egy nagyszerű irány, amely teljesen megváltoztatja a React Native navigációjának kezelését. A dinamikus útvonalak a reakciónavigációval foglalkozó felhasználók egyik fő kérését jelentették, és ez az új módszer segít nekünk jobb felhasználói navigációs élmény megteremtésében.

A React Native-ról itt talál további tartalmat

Köszönöm, hogy elolvasta

  • Twitter
  • GitHub
  • Csatlakozzon a levelezőlistához
React Native fejlesztőt keres a projektjéhez? Üsse fel .