Как обрабатывать навигацию в реактивном родном с реактивным навигацией 5

Автор оригинала: 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

Спасибо за прочтение