La nueva arquitectura de React Native impulsa un rendimiento superior: menos consumo de batería, animaciones fluidas y una experiencia natural. Gracias a un motor de JavaScript en Fabric y un render en Hermes, se optimiza el ciclo de ejecución. Aquí verás cómo crear una pantalla about, enlazarla desde home con Expo Router y resolver errores comunes con la terminal, limpieza de caché y Expo Go.
¿Cómo mejora el rendimiento con la nueva arquitectura de React Native?
La base del desempeño está en dos pilares: un motor de JavaScript en Fabric y un render en Hermes. Esto reduce el desgaste de batería y mantiene la interfaz fluida al interactuar con pantallas y navegación.
¿Por qué se nota en la experiencia del usuario?
- Menor consumo de recursos del dispositivo.
- Transiciones y desplazamientos más naturales.
- Respuesta inmediata al tocar tabs o enlaces.
¿Qué ventajas prácticas obtienes al desarrollar?
- Cambios visibles con más estabilidad.
- Menos bloqueos durante el render.
- Base sólida para crecer la app de hábitos.
¿Cómo crear una nueva pantalla y tabs con Expo Router?
Expo Router trata los archivos dentro de la carpeta tabs como páginas y tabs automáticamente. Duplicar la pantalla principal y renombrarla permite sumar una vista sin configurar rutas manuales.
¿Qué pasos seguir para duplicar y renombrar?
- Copiar el archivo del index (tu home) dentro de la carpeta tabs.
- Pegar y renombrar con rename para que sea un identificador claro: about.
- Editar el contenido: título “sobre mí” y un mensaje de ánimo para la app de hábitos.
- Guardar y verificar que aparece una nueva tab de forma automática.
¿Qué aporta el uso de TSX en tabs?
- Estructura declarativa y simple.
- Una vista nueva con solo agregar un archivo .tsx.
- Consistencia en estilos y componentes reutilizables.
¿Cómo navegar con link y evitar errores comunes?
Además de las tabs, puedes navegar mediante texto clicable usando la etiqueta Link. Desde home, crea un enlace que apunte a la página about, importando el componente directamente desde expo-router.
¿Cómo crear el enlace a about?
- Ir a home y añadir una etiqueta Link.
- Importar Link desde expo-router cuando lo solicite.
- Agregar la propiedad de destino entre comillas con la ruta: "about".
- Hacer clic en “ir sobre mí” y confirmar que redirige a about.
¿Qué errores típicos verás y cómo depurarlos?
- Falta de cierre en una etiqueta: revisar la terminal, que indica el archivo y la línea exacta.
- Cambios que no se renderizan: en la terminal, presionar la tecla r para redesplegar.
- Inconsistencias por caché: iniciar con el comando que incluye -c para borrar la caché antes del despliegue.
- Puerto ocupado: aceptar el nuevo puerto sugerido por la terminal.
- Vista en dispositivo físico: conectar laptop y dispositivo al mismo wifi para ver la app en Expo Go.
¿Te gustaría que profundicemos en más patrones con Expo Router o en expresiones de JavaScript para sumar interactividad? Deja tus preguntas y cuéntame qué parte quieres explorar a fondo.
