Estructura y navegación con Expo Router en React Native

Domina la arquitectura moderna de Expo Router en React Native: estructura de carpetas, uso de layout y tabs, configuración para Android y iOS, creación de pantallas con View y Text, y estilos con StyleSheet en CamelCase. Además, aprovecha Fast Refresh para ver cambios al instante mientras desarrollas.

¿Cómo se organiza la app con Expo Router?

La carpeta app concentra las pantallas y la navegación. Cada carpeta o archivo dentro de app funciona como una página. El archivo layout actúa como proveedor de información para el resto, y define el esquema de navegación con un stack y tabs.

¿Qué hace el layout y cómo provee datos?

• Centraliza la navegación y el contexto que consumen las demás páginas.
• Declara un stack que verás como tabs en la interfaz.
• Permite comunicar y compartir configuración entre pantallas.

¿Cómo funcionan tabs y pantallas index y explore?

• En la carpeta tabs, cada archivo representa una pantalla.
• index corresponde a la pantalla home.
• explore es otra pantalla a la que accedes desde los tabs.
• Agregar un archivo en tabs crea una nueva pantalla automáticamente.

¿Dónde configuro Android y iOS y dónde van assets y componentes?

• Hay un archivo de configuración con nombres e íconos para Android e iOS; allí ajustas lo específico de cada sistema.
• La carpeta assets almacena imágenes y fuentes.
• La carpeta componentes guarda piezas pequeñas reutilizables para construir pantallas, fomentando una arquitectura modular.

¿Cómo se crean pantallas y estilos con JSX y StyleSheet?

Una pantalla básica usa etiquetas similares a HTML: una etiqueta padre y otra hija, con apertura y cierre. En React Native, View funciona como el div de HTML y Text como un párrafo o un h1.

¿Qué etiquetas base se usan y a qué se parecen?

• View: contenedor principal, equivalente a un div.
• Text: texto visible, equivalente a p o h1.
• Estructura padre–hijo con etiquetas de apertura y cierre.

¿Cómo aplicar estilos con style y StyleSheet en CamelCase?

Los estilos se aplican con la propiedad style y un StyleSheet. Se usan corchetes para pasar objetos de JavaScript y propiedades en CamelCase (por ejemplo, justifyContent en lugar de justify-content). Puedes centrar el contenido vertical y horizontalmente, añadir color de fondo, y definir tamaño, grosor y color de tipografías.

import { View, Text, StyleSheet } from 'react-native';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.titulo}>Cambios visibles al guardar.</Text>
      <Text style={styles.subtitulo}>Fast Refresh aplicado al instante.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center', // centra verticalmente.
    alignItems: 'center',      // centra horizontalmente.
    // backgroundColor: '...'.
  },
  titulo: {
    // fontSize: ...,
    // fontWeight: 'bold',
    // color: '...'.
  },
  subtitulo: {
    // fontSize: ...,
    // color: '...'.
  },
});

• Importa View y Text desde react-native para construir la interfaz.
• Crea una constante styles y úsala con style={styles.algo}.
• El editor sugiere propiedades definidas en StyleSheet al escribir styles..

¿Cómo editar y ver cambios al instante con Fast Refresh?

Con Fast Refresh, cada guardado muestra los cambios de inmediato en el dispositivo. Si el contenido aparece arriba o se ve en blanco, ajusta el contenedor con estilos para centrar y dar visibilidad a los textos. Esto acelera la iteración mientras trabajas en la pantalla index.

¿Qué recomendación evita desconexiones del dispositivo?

• Desactiva el bloqueo automático del teléfono. Evita que se desconecte del localhost de tu laptop.

¿Te gustaría ver ejemplos adicionales de tabs o más patrones de estilos en CamelCase? Deja tus dudas y comenta qué parte quieres profundizar.