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 verionsyarn add react-navigationA instalação do React Navigation 5 terá esta aparência.
// yarnyarn add @react-navigation/native// npmnpm install @react-navigation/nativeAs 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.
// yarnyarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view// npmnpm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-viewTelas 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.
// @flowimport 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 )}
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 ( )}
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.indexlet routes = navigationState.routes.lengthconsole.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 focadauseLinking: 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.