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 ) } 
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]", username: "John", }, } let ProfileScreenTitle = auth.authenticated ? auth.user.username : "Profile" return ( ) } 
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özuseLinking: 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
- GitHub
- Csatlakozzon a levelezőlistához