Как да боравите с навигацията в React Native с реакция-навигация 5

React-navigation е навигационната библиотека, която ми идва на ум, когато говорим за навигация в React Native.

Аз съм голям фен на тази библиотека и това винаги е първото решение, което използвам за обработка на навигацията в React Native. Това е отчасти поради това, че има страхотен и лесен API и е много персонализиран.

Пиша тази статия, защото версия 5 току-що премина от бета в стабилна. Той идва с някои промени на функциите и нов дизайн на API, който осигурява прост и различен начин за деклариране на маршрути.

В тази статия ще разгледаме новите API и ще разгледаме начините да ги използваме в нашите приложения.

Първоначално публикувано на saidhayani.com

Инсталиране

Начинът, по който инсталирате response-navigation, е променил малко залог в сравнение с предишните версии (> 4.x):

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

Инсталирането на response-navigation 5 ще изглежда така:

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

Най-новите версии на response-navigation използват много библиотеки на трети страни като response-native-gesture-handler за анимация и обработка на преходи. Така че винаги трябва да инсталирате тези библиотеки.

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

Динамични екрани

Новият API въвежда динамика в инициализирането на маршрути. Преди това беше направено статично - основно трябваше да дефинираме нашите маршрути в конфигурационен файл.

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

Новият API идва с динамични компоненти. и направи навигацията да бъде по-динамична.

Новият начин за деклариране на маршрутите ще бъде подобен на следния.

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

реакция-навигация5-демо

Този нов начин е динамичен, по-лесен за използване и е подобен на API на рутера за реакция.

Динамични опции

Това е най-търсената функция от общността от дълго време. Винаги съм имал проблеми със стария метод (статичен) и беше наистина трудно да променя динамичното поведение на навигацията.

Старият метод => <4.x

При по-старите версии на реакцията-навигация трябваше да дефинираме статични опции. И нямаше начин това да се промени динамично.

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

Новият метод (версия 5)

React-навигацията идва с динамичен метод, който е доста прост. Можем да зададем опциите на всеки екран, използвайки само 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

С динамичните опции мога да променя заглавието въз основа на удостоверяване. Например, ако потребителят е удостоверен, мога да задам заглавието на екрана да бъде потребителско име на потребителя или да променя backgroundColor за заглавката.

Това е по-полезно, особено ако използвате динамични теми или ако сте готови да внедрите тъмен режим в приложението си.

Куки

Това е любимата ми функция досега и спестява време. Новият API въведе някои персонализирани куки за извършване на определени действия.

В предишни версии, например, ако трябваше да получа текущото име на активния екран, трябваше да създам някои помощници, които да го направят за мен почти като следното.

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 на hooks ми помага да избягвам всички тези неща и ми улеснява достъпа до API за навигация с един ред с помощта на кука.

Сега лесно мога да намеря RouteName с помощта на useRouteHook.

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

Можем да направим същото с useNavigationStateКуката. Дава ни достъп до състоянието на навигация.

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

React-навигацията предлага и други куки, например:

  • useFocuseEffect : кука за страничен ефект, която при зареждане на екраните връща фокусирания екран
  • useLinking: обработва дълбоко свързване

Силно препоръчвам да ги проверите.

Обобщавайки

Новият API за реакция и навигация определено преминава от статичен към динамичен. Това е чудесна посока, която абсолютно ще промени начина, по който се справяме с навигацията в React Native. Динамичните маршрути бяха основна заявка от потребителите с реакция-навигация и този нов начин ще ни помогне да създадем по-добро потребителско навигационно изживяване.

Можете да намерите повече съдържание за React Native тук

Благодаря за четенето

  • Twitter
  • GitHub
  • Присъединете се към пощенския списък
Търсите разработчик на React Native за вашия проект? Удари ме .