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 ) } 
Цей новий спосіб є динамічним, простішим у використанні та подібним до 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 ( ) } 
За допомогою динамічних опцій я можу змінити заголовок на основі автентифікації. Наприклад, якщо користувач аутентифікований, я можу встановити заголовок екрана як ім'я користувача, або я можу змінити 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 тут
Дякуємо за читання
- GitHub
- Приєднуйтесь до списку розсилки