Автор оригинала: FreeCodeCamp Community Member.
React – Navigation – это библиотека навигации, которая приходит к моему мнению, когда мы говорим о навигации в реактивном родном.
Я большой поклонник этой библиотеки, и это всегда первое решение, которое я использую для обработки навигации в реакции на родом. Это частично Blausae у него есть потрясающий и легкий API и очень настраивается.
Я пишу эту статью, потому что версия 5 только что пошла от бета в стабильную. Он поставляется с некоторыми изменениями функций и новой конструкции API, который обеспечивает простой и другой способ объявления маршрутов.
В этой статье мы собираемся пройти новые API и посмотреть способы использовать их в наших приложениях.
Первоначально опубликовано на Shadhayani.com.
Установка
Как вы устанавливаете React-навигацию, изменили небольшую ставку по сравнению с предыдущими версиями (> 4.x):
// > 4.x verions yarn add react-navigation
Установка React-Navigation 5 будет выглядеть так:
// yarn yarn add @react-navigation/native // npm npm install @react-navigation/native
Последние версии RACT-навигации используют много третьей сторонней библиотеки, как Реагистрационный жест-обработчик для анимации и обработки переходов. Так что вам всегда нужно установить эти библиотеки.
// 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)
Реагистрационная навигация поставляется с динамическим методом, который довольно прост. Мы можем установить параметры на любой экран, используя только реквизит
Отказ
const AppNavigation = ({}) => { let auth = { authenticated: true, user: { email: "user@mail.com", 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, используя Useroute
Крюк.
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 предлагает другие крючки, например:
UseFocuseefefect
: побочный эффект, который, когда на экранах загружаются, возвращает фокусированный экранUSELINKING
: обрабатывает мнение
Я настоятельно рекомендую вам Проверьте их Отказ
Обертывание
Новая API React-навигация определенно движется от статического для динамического. Это отличное направление, которое будет абсолютно изменить способ, которым мы обрабатываем навигацию в реактивном родном. Динамические маршруты были главной просьбой по реагированным пользователям, и этот новый способ поможет нам создать лучший опыт навигации пользователя.
Вы можете найти больше контента в race
Спасибо за прочтение