Enrutamiento nativo reinventado con 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 lo haría construir un sistema de navegación usando React Navigation. Expo Router aborda las principales preocupaciones con el uso del actual sistema de navegación en funcionamiento.

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 basada 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 puedes definir rutas.

Instalación y configuración del enrutador Expo

Es bastante simple migrar su proyecto Expo del antiguo sistema de navegación al enrutador Expo.

Paso 1: Instale el enrutador Expo

Use este comando de terminal para ejecutar el instalador de expo-router:

npx expo instalar expo-enrutador

También deberá asegurarse de haber instalado estas dependencias de pares:

• reaccionar-nativo-área segura-contexto
• reaccionar-nativo-pantallas
• vinculación de exposiciones
• expo-status-bar
• manejador de gestos nativos de reacción

Si falta alguno, puede instalarlo ejecutando:

instalación de la exposición npx 

Paso 2: actualice el punto de entrada

Crear un nuevo índice.js archivo para reemplazar su existente Aplicación.js punto de entrada y establecer el índice.js como punto de entrada de la aplicación en el interior aplicación.json:

// Establecer index.js como punto de entrada
{
"principal": "index.js"
}
// Importa lo siguiente dentro de index.js
importar"expo-router/entrada";

Expo Router utiliza un enlace profundo esquema para determinar qué pantalla o contenido abrir al enrutar.

Defina un esquema de enlaces profundos para su aplicación agregando un esquema propiedad a aplicación.json:

{
"exposición": {
"esquema": "miaplicacion"
 }
}

Paso 4: Configuración final

El último paso es configurar el paquete de metro de su aplicación Expo y configurar Babel para admitir Expo Router en su aplicación.

Adentro babel.config.js modifique el código existente para que se vea así:

módulo.exportaciones = función (API) {
 api.cache(verdadero);
devolver {
 Preajustes: ["babel-preset-expo"],
 complementos: [
requerir.resolver("expo-router/babel"),
/* */
 ],
 };
};

Ahora reconstruya e inicie su aplicación ejecutando:

exposición npx --claro

Construyendo las rutas de su aplicación con Expo Router

Puede comenzar a configurar un flujo de navegación dentro de la aplicación carpeta. El índice.js archivo es su punto de partida. Expo Router agrega la ruta de cada archivo que creas dentro aplicación al sistema de rutas de la aplicación con enlaces profundos de URL para que coincida con cada página.

Por ejemplo, cree un Segunda pantalla.js archivo dentro del aplicación directorio y exportar un componente predeterminado:

importar { Hoja de estilo, Texto, Ver } de"reaccionar-nativo";
importar Reaccionar de"reaccionar";
constante Segunda pantalla = () => {
devolver (


Segunda pantalla</Text>
 </View>
 </View>
 );
};
exportarpor defecto Segunda pantalla;
constante estilos = StyleSheet.create({});

Puede navegar a esta pantalla desde índice.js con el usarRouter() método:

importar { usar enrutador } de"expo-enrutador";
exportarpor defectofunciónPágina() {
constante navegación = usarRouter();
devolver (

Hola mundo</Text>
esta es la primera pagina de tu aplicación.</Text>
 titulo="Navegar a Segunda Pantalla"
 onPress={() => {
 navegación.push("/Segunda pantalla");
 }}
 />
 </View>
 );
}

Aquí asigna el enrutador a la navegación y lo usa dentro del elemento Botón llamando navegación.push("/segundo"). El argumento dentro de push es la ruta del archivo de la pantalla a la que desea navegar.

Adentro Segunda pantalla también puede navegar a la pantalla de índice de esta manera:

importar { Enlace } de"expo-enrutador";
constante Segunda pantalla = () => {
devolver (


Segunda pantalla</Text>
"/" comoNiño>

Navegue a index.js</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

El elemento de enlace toma un accesorio href para especificar la ruta. Dentro de la aplicación, el "/" la ruta corresponde al archivo de entrada (index.js). El segundo accesorio es asChild. Esta propiedad le permite representar un primer componente secundario con todas las propiedades especificadas en lugar del componente de enlace predeterminado. Puede usar esto para personalizar el aspecto del componente Link o para implementar una lógica de enrutamiento personalizada.

Definición de rutas dinámicas

Con las rutas dinámicas, puede generar rutas dinámicamente en función de ciertos parámetros o datos. En lugar de definir un conjunto fijo de rutas, gana flexibilidad y adaptabilidad en la navegación de su aplicación.

Para comenzar a usar rutas dinámicas en Expo Router, debe definir las rutas para manejar contenido dinámico. Puede usar rutas parametrizadas especificando marcadores de posición dentro de la ruta de la ruta. Los valores para 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. Puede definir una ruta dinámica para manejar cada una de las publicaciones del blog:

// aplicación/rutas/BlogPost.js
importar Reaccionar de"reaccionar";
importar { usar enrutador } de"expo-enrutador";
constante BlogPost = ({ ruta }) => {
constante { postId } = ruta.parámetros;
devolver (

Mostrar publicación de blog con ID: {postId}</Text>
 </View>
 );
};
exportarpor defecto Entrada en el blog;

En este ejemplo, define un componente de ruta dinámico llamado Entrada en el blog. El ruta.parámetros El objeto le permite acceder a los valores de los parámetros pasados ​​a la ruta. En este caso, está accediendo a un ID del mensaje parámetro para mostrar la publicación de blog correspondiente.

Generación de rutas dinámicas

Ahora que tiene una ruta dinámica definida, puede generar rutas dinámicamente en función de los datos o la entrada 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.

Aquí hay un ejemplo:

// aplicación/componentes/BlogList.js
importar Reaccionar de"reaccionar";
importar { usar Navegación } de"expo-enrutador";
constante ListaBlogs = ({ Publicaciones de blog }) => {
constante navegación = useNavigation();
constante navegarABlogPost = (ID del mensaje) => {
 navegación.navegar("Entrada en el blog", { ID del mensaje });
 };
devolver (

 {blogPublicaciones.mapa((correo) => (
 clave={publicación.id}
 onPress={() => navegarABlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
exportarpor defecto BlogLista;

En este ejemplo, se itera sobre el blogPublicaciones matriz y renderizar un componente para cada puesto. Cuando presionas una publicación, la navegarABlogPost la función se ejecuta, pasando el ID del mensaje a la ruta de navegación.

Manejo de rutas dinámicas

Puede escuchar los eventos de navegación específicos de una ruta dinámica mediante el useFocusEffect gancho.

Por ejemplo:

// aplicación/rutas/BlogPost.js
importar Reaccionar de"reaccionar";
importar { Ruta, useFocusEffect } de"expo-enrutador";
constante BlogPost = ({ ruta }) => {
constante { postId } = ruta.parámetros;
 usarEfectoEnfoque(() => {
// Obtener datos de publicaciones de blog en función de postId
// Realizar cualquier otra acción necesaria en el foco
 });
devolver (

Mostrar publicación de blog con ID: {postId}</Text>
 </View>
 );
};
exportarpor defecto Entrada en el blog;

En este ejemplo, el useFocusEffect gancho escucha eventos de enfoque específicos para el Entrada en el blog componente. Dentro de la devolución de llamada, puede obtener datos adicionales, realizar acciones o actualizar la pantalla según la publicación de blog enfocada.

Navegación 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 a la Entrada en el blog componente con una determinada ID del mensaje, puedes usar el navegación.navegar método:

// aplicación/componentes/BlogList.js
importar Reaccionar de"reaccionar";
importar { usar Navegación } de"expo-enrutador";
constante ListaBlogs = ({ Publicaciones de blog }) => {
constante navegación = useNavigation();
constante navegarABlogPost = (ID del mensaje) => {
 navegación.navegar("Entrada en el blog", { ID del mensaje });
 };
devolver (

 {blogPublicaciones.mapa((correo) => (
 clave={publicación.id}
 onPress={() => navegarABlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
exportarpor defecto BlogLista;

Cuando presiona una entrada de blog, la navegarABlogPost La función se disparará con el ID del mensaje.

Expo Router lo 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, profundizado en los conceptos básicos de enrutamiento y descubierto cómo crear rutas dinámicas. Con Expo Router, puede crear flujos de navegación dinámicos, manejar datos variados o entradas de usuarios y personalizar la navegación en su aplicación.