Cómo manejar la navegación en React Native con react-navigation 5

React-navigation es la biblioteca de navegación que me viene a la mente cuando hablamos de navegación en React Native.

Soy un gran admirador de esta biblioteca y siempre es la primera solución que uso para manejar la navegación en React Native. Esto se debe en parte a que tiene una API increíble y fácil y es muy personalizable.

Estoy escribiendo este artículo porque la versión 5 acaba de pasar de beta a estable. Viene con algunos cambios de funciones y un nuevo diseño de API que proporciona una forma simple y diferente de declarar rutas.

En este artículo, repasaremos las nuevas API y buscaremos formas de usarlas en nuestras aplicaciones.

Publicado originalmente en saidhayani.com

Instalando

La forma de instalar react-navigation ha cambiado un poco en comparación con las versiones anteriores (> 4.x):

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

La instalación de react-navigation 5 se verá así:

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

Las últimas versiones de react-navigation utilizan muchas bibliotecas de terceros como react-native-gesto-handler para la animación y el manejo de transiciones. Por lo tanto, siempre debe instalar esas 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 

Pantallas dinámicas

La nueva API introduce dinamismo en la inicialización de rutas. Anteriormente se hacía estáticamente; básicamente, teníamos que definir nuestras Rutas en un archivo de configuración.

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

La nueva API viene con componentes dinámicos. e hizo que la navegación fuera más dinámica.

La nueva forma de declarar las Rutas será muy parecida a la siguiente.

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

Esta nueva forma es dinámica, más sencilla de usar y es algo similar a la API react-router.

Opciones dinámicas

Esta ha sido la característica más solicitada por la comunidad durante mucho tiempo. Siempre tuve problemas con el método antiguo (estático) y fue realmente difícil cambiar el comportamiento de navegación de forma dinámica.

El método antiguo => <4.x

Con versiones anteriores de react-navigation, tuvimos que definir opciones estáticas. Y no había forma de cambiar esto de forma dinámica.

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

El nuevo método (versión 5)

React-navigation viene con un método dinámico que es bastante simple. Podemos configurar las opciones para cualquier pantalla usando solo props.

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

react-navigation-header

Con las opciones dinámicas, puedo cambiar el título según la autenticación. Por ejemplo, si el usuario está autenticado, puedo configurar el título de la pantalla para que sea el nombre de usuario del usuario, o puedo cambiar backgroundColor para el encabezado.

Esto es más útil, especialmente si está utilizando temas dinámicos o si está dispuesto a implementar el modo oscuro en su aplicación.

Manos

Esta es mi característica favorita hasta ahora y me ahorra tiempo. La nueva API introdujo algunos ganchos personalizados para realizar ciertas acciones.

En versiones anteriores, por ejemplo, si tenía que obtener el nombre actual de la pantalla activa, tenía que crear algunos ayudantes para que lo hicieran por mí de forma muy similar a la siguiente.

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 } 

La API de hooks me ayuda a evitar todas estas cosas y me facilita el acceso a la API de navegación con una sola línea usando un hook.

Ahora puedo obtener fácilmente el RouteName usando useRouteHook.

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

Podemos hacer lo mismo con el useNavigationStateHook. Nos da acceso al estado de navegación.

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

React-navigation también ofrece otros ganchos, por ejemplo:

  • useFocuseEffect : un gancho de efectos secundarios que, cuando se cargan las pantallas, devuelve la pantalla enfocada
  • useLinking: maneja deepLinking

Te recomiendo que los revises.

Terminando

La nueva API de navegación de reacción definitivamente pasa de estática a dinámica. Es una gran dirección que cambiará absolutamente la forma en que manejamos la navegación en React Native. Las rutas dinámicas fueron una solicitud importante de los usuarios de navegación reactiva, y esta nueva forma nos ayudará a crear una mejor experiencia de navegación para el usuario.

Puede encontrar más contenido sobre React Native aquí

Gracias por leer

  • Gorjeo
  • GitHub
  • Únase a la lista de correo
¿Busca un desarrollador de React Native para su proyecto? Golpéame .