Як обробляти навігацію в React Native за допомогою реакції-навігації 5

React-navigation - це навігаційна бібліотека, яка мені спадає на думку, коли ми говоримо про навігацію в React Native.

Я великий шанувальник цієї бібліотеки, і це завжди перше рішення, яке я використовую для обробки навігації в React Native. Це частково тому, що він має дивовижний і простий API і дуже настроюється.

Я пишу цю статтю, оскільки версія 5 щойно перейшла з бета-версії в стабільну. Він поставляється з деякими змінами функцій та новим дизайном API, який забезпечує простий та інший спосіб оголошення маршрутів.

У цій статті ми збираємось ознайомитися з новими API та розглянути способи їх використання в наших додатках.

Спочатку опубліковано на saidhayani.com

Встановлення

Спосіб встановлення реакції-навігації трохи змінився порівняно з попередніми версіями (> 4.x):

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

Встановлення реакції-навігації 5 буде виглядати так:

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

В останніх версіях реагування-навігації використовується багато сторонніх бібліотек, таких як 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-навігація поставляється з динамічним методом, який досить простий. Ми можемо встановити параметри на будь-який екран, використовуючи just props.

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

response-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 хуків допомагає мені уникати всіх цих речей і полегшує мені доступ до 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-navigation пропонує також інші гачки, наприклад:

  • useFocuseEffect : гачок побічного ефекту, який при завантаженні екранів повертає сфокусований екран
  • useLinking: обробляє deepLinking

Настійно рекомендую перевірити їх.

Підведенню

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

Ви можете знайти більше вмісту про React Native тут

Дякуємо за читання

  • Twitter
  • GitHub
  • Приєднуйтесь до списку розсилки
Шукаєте розробника React Native для вашого проекту? Удари мене .