Enrutamiento nativo reinventado con Expo Router
Limpie sus rutas URL, incluso en aplicaciones móviles, utilizando la biblioteca Expo Router.
El enrutamiento basado en archivos es una técnica común de desarrollo web que asigna una ruta URL a un archivo específico en un directorio de proyecto. Este sistema evita las complejas configuraciones de enrutamiento involucradas en la construcción de sistemas de navegación.
Con el lanzamiento de la biblioteca Expo Router, el enrutamiento basado en archivos es posible con las aplicaciones React Native. Expo Router podría ser un mejor sistema de navegación para los desarrolladores de React Native que trabajan con Expo.
Navegación reinventada con Expo Router
El enrutador expo proporciona una solución de enrutamiento declarativo para las aplicaciones React Native Expo. Este sistema es considerablemente diferente de cómo construiría un sistema de navegación usando React Navigation. Expo Router aborda grandes preocupaciones con el uso del sistema de navegación actual.
Estos problemas incluyen tener un sistema de navegación que no funciona de manera consistente en todas partes, dificultades para administrar enlaces profundos y también configuraciones complejas para transiciones de navegación personalizadas.
La navegación/enrutamiento basado en archivos del enrutador expo es un sistema simple que funciona bien y ya es familiar entre los desarrolladores de JavaScript y los marcos de JavaScript como Next.js, donde puede definir rutas.
Instalación y configuración del enrutador Expo
Es bastante sencillo migrar su proyecto Expo desde el antiguo sistema de navegación al enrutador Expo.
Paso 1: instale el enrutador Expo
Utilice este comando de terminal para ejecutar el instalador de expo-router:
npx expo install expo-router
También deberá asegurarse de haber instalado estas dependencias de pares:
- reaccionar-nativo-contexto-de-área-segura
- reaccionar-pantallas-nativas
- expo-vinculación
- barra-de-estado-expo
- reaccionar-nativo-controlador-de-gestos
Si falta alguno, puedes instalarlo ejecutando:
npx expo install <dependency-name>
Paso 2: actualice el punto de entrada
Cree un nuevo archivo index.js para reemplazar su punto de entrada App.js existente y establezca index.js como el punto de entrada de la aplicación dentro de < fuerte>app.json:
// Set index.js as entry point
{
"main": "index.js"
}
// Import the following inside index.js
import "expo-router/entry";
Paso 3: definir un esquema de enlaces profundos
Expo Router utiliza un esquema de enlace profundo para determinar qué pantalla o contenido abrir durante el enrutamiento.
Defina un esquema de vínculos profundos para su aplicación agregando una propiedad scheme a app.json:
{
"expo": {
"scheme": "myapp"
}
}
Paso 4: Configuración final
El último paso es configurar el paquete metro de su aplicación Expo y configurar Babel para que admita Expo Router en su aplicación.
Dentro de babel.config.js modifique el código existente para que tenga este aspecto:
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
require.resolve("expo-router/babel"),
/* */
],
};
};
Ahora reconstruya e inicie su aplicación ejecutando:
npx expo --clear
Construyendo las rutas de su aplicación con Expo Router
Puede comenzar a configurar un flujo de navegación dentro de la carpeta app. El archivo index.js es su punto de partida. Expo Router agrega la ruta de cada archivo que crea dentro de la aplicación al sistema de rutas de la aplicación con enlaces profundos URL que coinciden con cada página.
Por ejemplo, cree un archivo SecondScreen.js dentro del directorio app y exporte un componente predeterminado:
import { StyleSheet, Text, View } from "react-native";
import React from "react";
const SecondScreen = () => {
return (
<View style={styles.container}>
<View style={styles.textStyle}>
<Text>Second Screen</Text>
</View>
</View>
);
};
export default SecondScreen;
const styles = StyleSheet.create({});
Puedes navegar a esta pantalla desde index.js con el método useRouter():
import { useRouter } from "expo-router";
export default function Page() {
const navigation = useRouter();
return (
<View style={styles.container}>
<Text style={styles.title}>Hello World</Text>
<Text style={styles.subtitle}>This is the first page of your app.</Text>
<Button
title="Navigate to SecondScreen"
onPress={() => {
navigation.push("/SecondScreen");
}}
/>
</View>
);
}
Aquí asigna el enrutador a la navegación y lo usa dentro del elemento Botón llamando a navigation.push("/segundo"). El argumento dentro de push es la ruta del archivo de la pantalla a la que desea navegar.
Dentro de SecondScreen también puedes navegar a la pantalla de índice de esta manera:
import { Link } from "expo-router";
const SecondScreen = () => {
return (
<View style={styles.container}>
<View style={styles.textStyle}>
<Text>Second Screen</Text>
<Link href="/" asChild>
<TouchableOpacity>
<Text>Navigate to index.js</Text>
</TouchableOpacity>
</Link>
</View>
</View>
);
};
El elemento de enlace toma un accesorio href para especificar la ruta. Dentro de la aplicación, la ruta "/" corresponde al archivo de entrada (index.js). El segundo accesorio es asChild. Este accesorio le permite representar un primer componente secundario con todos los accesorios especificados en lugar del componente de enlace predeterminado. Puede utilizar esto para personalizar el aspecto del componente Link o para implementar una lógica de enrutamiento personalizada.
Definición de rutas dinámicas
Con Rutas dinámicas, puedes generar rutas de forma dinámica en función de ciertos parámetros o datos. En lugar de definir un conjunto fijo de rutas, obtienes flexibilidad y adaptabilidad en la navegación de tu aplicación.
Para comenzar a utilizar rutas dinámicas en Expo Router, debe definir las rutas para manejar contenido dinámico. Puede utilizar rutas parametrizadas especificando marcadores de posición dentro de la ruta de la ruta. Los valores de estos marcadores de posición estarán disponibles para su ruta cuando alguien navegue hacia ella.
Por ejemplo, considere una aplicación de blogs en la que desee mostrar publicaciones de blog individuales. Puedes definir una ruta dinámica para manejar cada una de las publicaciones del blog:
// app/routes/BlogPost.js
import React from "react";
import { useRouter } from "expo-router";
const BlogPost = ({ route }) => {
const { postId } = route.params;
return (
<View>
<Text>Displaying Blog Post with ID: {postId}</Text>
</View>
);
};
export default BlogPost;
En este ejemplo, definirá un componente de ruta dinámica denominado BlogPost. El objeto route.params le permite acceder a los valores de los parámetros pasados a la ruta. En este caso, estás accediendo a un parámetro postId para mostrar la publicación del blog correspondiente.
Generando rutas dinámicas
Ahora que tiene una ruta dinámica definida, puede generar rutas dinámicamente basadas en datos o entradas del usuario. Por ejemplo, si tiene una lista de publicaciones de blog obtenidas de una API, puede generar rutas dinámicamente para cada publicación de blog.
He aquí un ejemplo:
// app/components/BlogList.js
import React from "react";
import { useNavigation } from "expo-router";
const BlogList = ({ blogPosts }) => {
const navigation = useNavigation();
const navigateToBlogPost = (postId) => {
navigation.navigate("BlogPost", { postId });
};
return (
<View>
{blogPosts.map((post) => (
<TouchableOpacity
key={post.id}
onPress={() => navigateToBlogPost(post.id)}
>
<Text>{post.title}</Text>
</TouchableOpacity>
))}
</View>
);
};
export default BlogList;
En este ejemplo, se itera sobre la matriz blogPosts y se representa un componente
Manejo de rutas dinámicas
Puede escuchar eventos de navegación específicos de una ruta dinámica utilizando el enlace useFocusEffect.
Por ejemplo:
// app/routes/BlogPost.js
import React from "react";
import { Route, useFocusEffect } from "expo-router";
const BlogPost = ({ route }) => {
const { postId } = route.params;
useFocusEffect(() => {
// Fetch blog post data based on postId
// Perform any other necessary actions on focus
});
return (
<View>
<Text>Displaying Blog Post with ID: {postId}</Text>
</View>
);
};
export default BlogPost;
En este ejemplo, el gancho useFocusEffect escucha eventos de enfoque específicos del componente BlogPost. Dentro de la devolución de llamada, puede obtener datos adicionales, realizar acciones o actualizar la pantalla según la publicación del blog enfocada.
Navegando con rutas dinámicas
Para navegar a una ruta dinámica, puede utilizar los métodos de navegación proporcionados por Expo Router.
Por ejemplo, para navegar al componente BlogPost con un postId específico, puede utilizar el método navigation.navigate:
// app/components/BlogList.js
import React from "react";
import { useNavigation } from "expo-router";
const BlogList = ({ blogPosts }) => {
const navigation = useNavigation();
const navigateToBlogPost = (postId) => {
navigation.navigate("BlogPost", { postId });
};
return (
<View>
{blogPosts.map((post) => (
<TouchableOpacity
key={post.id}
onPress={() => navigateToBlogPost(post.id)}
>
<Text>{post.title}</Text>
</TouchableOpacity>
))}
</View>
);
};
export default BlogList;
Cuando presionas una publicación de blog, la función navigateToBlogPost se activará con el postId.
Expo Router le ayuda a estructurar sus aplicaciones nativas
Expo Router proporciona una excelente solución para administrar la navegación en sus aplicaciones React Native. Al reinventar la experiencia de enrutamiento nativo, Expo Router ofrece flexibilidad y facilidad de uso.
Ha explorado las funciones de Expo Router, ha profundizado en conceptos básicos de enrutamiento y ha descubierto cómo crear rutas dinámicas. Con Expo Router, puede crear flujos de navegación dinámicos, manejar datos variables o entradas del usuario y personalizar la navegación en su aplicación.