O React Navigation é a biblioteca de navegação mais próxima a se ter em mente quando falamos sobre a navegação no React Native. Sou um grande fã dessa biblioteca e minha primeira solução para lidar com a navegação no React Native; ele tem uma API incrível e fácil , muito personalizável. a versão 5 passou de beta para estável. e vem com algumas alterações de recursos e o novo design da API, que é uma maneira simples e diferente de declarar as rotas.
Neste artigo, estamos analisando as novas APIs e maneiras de usá-las em nossos aplicativos.

Publicado originalmente em saidhayani.com

Instalando

A maneira de instalar o react-navigation mudou uma pequena aposta em comparação com as versões anteriores (> 4.x)

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

A instalação do React Navigation 5 terá esta aparência.

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

As versões mais recentes do React Navigation usam muitas bibliotecas de terceiros, como react-native-gesto-manipulador para animação e manipulação das transições. então você sempre precisa instalar essas bibliotecas.

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

Telas dinâmicas

A nova API introduz o dinamismo na inicialização das rotas. anteriormente era uma maneira estática, basicamente, tínhamos que definir nossas rotas em um arquivo de configuração.

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

A nova API vem com componentes dinâmicos. e tornou a navegação mais dinâmica.
A nova maneira de declarar as rotas será muito parecida com a seguinte.

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

react-navigation5-demo

Essa nova maneira é dinâmica, mais simples de usar, é semelhante à API do roteador de reação.

Opções dinâmicas

Esse é o recurso mais solicitado pela comunidade há muito tempo. Sempre tive problemas com o método antigo (estático) e era realmente difícil alterar o comportamento da navegação dinamicamente.

O método antigo => <4.x

Com versões mais antigas do navegação de reação tivemos que definir opções estáticas. e não havia como mudar isso dinamicamente.

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

O novo método (versão 5)

O React-navigation vem com uma maneira dinâmica e simples, podemos definir as opções para qualquer tela usando apenas props.

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

reagir-navegação-cabeçalho

Com opções dinâmicas, posso alterar o título com base na autenticação, por exemplo, se o usuário estiver autenticado, posso definir o título da tela como o nome de usuário do usuário, posso alterar o backgroundColor para o cabeçalho. isso é mais útil, especialmente se você estiver usando temas dinâmicos ou se estiver disposto a implementar o modo escuro no seu aplicativo.

Hooks

Este é o meu recurso favorito até agora, economiza tempo, a nova API introduziu alguns ganchos personalizados para executar determinadas ações.

Nas versões anteriores, por exemplo, se eu tiver que obter o currentName da tela ativa, tive que criar alguns auxiliares para fazer isso por mim, como os seguintes.

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
}

A API de hooks me evita todas essas coisas e facilita o acesso à API de navegação com uma única linha usando um hook.

Agora posso obter facilmente o RouteName usando useRoute Gancho.

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

A mesma coisa que podemos fazer com useNavigationState Gancho. isso nos dá acesso ao estado de navegação.

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

O React Navigation também oferece outros ganchos, por exemplo:

  • useFocuseEffect : É um gancho de efeito colateral que carrega as telas, retorna a tela focada
  • useLinking: para lidar com o deepLinking

Eu recomendo você vê-los.

Empacotando

A nova API do React-navigation mudou definitivamente de uma maneira estática para dinâmica. é um ótimo movimento que mudará absolutamente a maneira como lidamos com a navegação no React Native. As rotas dinâmicas foram uma solicitação importante dos usuários de navegação de reação. A nova maneira nos ajudará a criar uma melhor experiência de navegação do usuário.

– Mais conteúdo sobre Reagir nativo

– De outros Reagir nativo

Obrigado pela leitura

Procurando um desenvolvedor do React Native para o seu projeto? me bata.