Guía de un principiante para usar Expo con el desarrollo nativo de reacción

Entendimiento de la Expo en el ecosistema nativo de reacción

Las aplicaciones nativas se construyen con JavaScript pero confían en módulos nativos para características como la cámara, Bluetooth o GPS. Tradicionalmente, la configuración de estos módulos nativos requiere Android Studio, Xcode, Gradle y CocoaPods, una curva de aprendizaje empinada para los recién llegados. Expone la complejidad. Proporciona una colección de trabajo gestionada donde la mayoría de las capacidades nativas son preconfiguradas, permitiendo que escriba código y vea resultados inmediatamente.

La distinción clave es entre los flujos de trabajo gestionados] y bare] dentro de Expo. Los principiantes casi siempre comienzan con el flujo de trabajo gestionado, donde Expo maneja la configuración nativa. Como tu app crece, puedes "ejetar" a un flujo de trabajo desnudo (ahora llamado "expo prebuild") y tomar el camino.

Por qué Expo importa para principiantes (y más allá)

Antes de Expo, muchos desarrolladores pasaron días simplemente obteniendo un ambiente nativo de reacción para compilar. Puntos de dolor comunes incluye discordancias de la versión entre SDKs Android, vinculando manualmente las bibliotecas nativas y depurando errores de construcción críptica. Expo elimina estos obstáculos:

• Zero native setup: No es necesario instalar Android Studio o Xcode para iniciar. Utilice la aplicación Expo Go de su teléfono para previsualizar al instante.
• Unified SDK: Todas las bibliotecas Expo se han versionado juntas. No tienes que preocuparte por la biblioteca A siendo incompatible con la biblioteca B.
• Actualizaciones de Over-the-air (OTA): Empujar JavaScript cambia directamente a los usuarios sin pasar por los comentarios de las tiendas de aplicaciones.
• Compartir instant: Generar un código QR para compartir tu app en progreso con compañeros de equipo o clientes.
• La comunidad y la documentación de la exposición : Los documentos oficiales de la Expo están entre los mejores del ecosistema de la React Native.

Por esas razones, Expo es ahora el punto de partida recomendado por el propio equipo de React Native. El oficial React Native docs guía principiantes para utilizar Expo si son nuevos para el desarrollo móvil.

Configuración de su entorno Expo

Prerrequisitos

• Node.js (versión 16 o posterior) – descarga de nodejs.org.
• A editor de código] (VS Code is highly recommended).
• Un dispositivo móvil] con la aplicación Expo Go instalada (]iOS] o Android.
• (Opcional) Una cuenta Expo] para la publicación y el intercambio – inscríbete en expo.dev.

Instalando Expo CLI

Expo CLI es la herramienta de línea de comandos que utiliza para crear, ejecutar y construir aplicaciones. Instalarlo globalmente a través de npm:

npm install -g expo-cli

Si utilizas Yarn, puedes ejecutar en su lugar. Verifica la instalación con . Observe que a partir de 2024, Expo se está desplazando hacia como el arranque predeterminado. Mientras todavía funciona, recomendamos utilizar el método más nuevo:

npx create-expo-app MyFirstApp --template blank

Esto crea un proyecto mínimo con la última versión de Expo SDK y soporte incorporado para TipoScript si se desea.

Explotación de la estructura del proyecto

Once your project is created, open it in your editor. Key files and directories:

• App.js (o App.tsx) – el punto de entrada de tu app. Todo lo que renderizas comienza aquí.
• package.json – enumera las dependencias (reactar, reaccionar-native, expo, y cualquier módulo de Expo que instale).
• app.json] – archivo de configuración para su proyecto Expo (nombre de aplicación, icono, pantalla de salpicaduras, permisos, etc.).
• node modules – contiene todos los paquetes instalados.
• .expo – estado local para Expo, no se comprometen al control de versiones.

La belleza de Expo es que no verás carpetas androide/o ios/ a menos que corras más tarde. Todo se gestiona a través del SDK Expo.

Correndo su aplicación por primera vez

Navegue a su directorio de proyecto:

cd MyFirstApp

Iniciar el servidor de desarrollo:

npx expo start

Un código QR aparece en el terminal (o una página web se abre con el código QR). Importante: En iOS, utilice la aplicación de cámara predeterminada; en Android, utilice la aplicación Expo Go para escanear. La aplicación se cargará en su dispositivo, y cualquier cambio que guarde en su editor de códigos se reflejará inmediatamente (recargación instantánea). También puede utilizar un ordenador si usted tiene instalado

Solución de problemas de inicio común

• Cuestiones de conversación: Asegurar que tu teléfono y equipo estén en la misma red Wi-Fi. Si eso falla, utilice el modo pulsando en el terminal Expo CLI. Esto funciona incluso en diferentes redes.
• Expo Go app muestra “Unable to find an app”: Esto significa que el servidor no ha comenzado completamente. Espera que los registros digan “Metro packr ready”.
• Bundler atornillado: Eliminar la carpeta y tratar de limpiar la caché.

Construyendo su primera pantalla: Un ejemplo práctico

Vamos a crear una pantalla simple con un botón que muestra una alerta. Reemplazar el contenido de con:

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

export default function App() {
 const showAlert = () => {
 Alert.alert('Hello!', 'You clicked the button.');
 };

 return (
 <View style={styles.container}>
 <Text style={styles.title}>Welcome to Expo!</Text>
 <Button title="Click Me" onPress={showAlert} />
 </View>
 );
}

const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: '#f0f0f0',
 },
 title: {
 fontSize: 24,
 marginBottom: 20,
 },
});

Guarda el archivo. Tu dispositivo debe mostrar al instante la pantalla. Presionar el botón activa la alerta nativa. Note que no escribió ningún código Java/Kotlin o Swift—Expo manejó el puente.

Añadiendo navegación con el Router Expo

La mayoría de las aplicaciones tienen múltiples pantallas. Expo Router] es la biblioteca de navegación recomendada porque utiliza la enrutación basada en archivos (similar a Next.js). Admite la conexión profunda, pestañas, pilas y modals directamente fuera de la caja.

Instalar el Router Expo

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants

Luego ajustar su para establecer el punto de entrada a ]. Crear un directorio en su raíz del proyecto. Dentro de él, crear para la pantalla de inicio y para una segunda pantalla.

app/
 index.js
 about.js
 _layout.js (optional, for shared layout)

En :

import { Link } from 'expo-router';
import { View, Text } from 'react-native';

export default function Home() {
 return (
 <View>
 <Text>Home Screen</Text>
 <Link href="/about">Go to About</Link>
 </View>
 );
}

Cuando el usuario toca el enlace, la aplicación navega a sin ninguna configuración. Este patrón escala a cientos de pantallas y es mucho más fácil que las configuraciones tradicionales de Navegación de Actos.

Características de acceso del dispositivo con Expo SDK

Expo proporciona más de 50 módulos para la funcionalidad de dispositivos. Algunos de los utilizados comúnmente:

Cámara

npx expo install expo-camera

Puedes solicitar permisos, tomar fotos y grabar vídeo.

import { Camera } from 'expo-camera';
// ... request permission with Camera.requestCameraPermissionsAsync()

Ubicación

npx expo install expo-location

Obtenga la posición actual del usuario, cambie la ubicación del reloj o direcciones de geocódigo.

Notificación

npx expo install expo-notifications

Programa y maneja notificaciones locales y empujar. Expo incluso proporciona un servicio de notificación de empuje para que no necesite un backend personalizado para enviar fichas.

Sistema de archivos

npx expo install expo-file-system

Lea, escriba y administre archivos en el dispositivo. Útil para capturar imágenes o descargar contenido.

Debido a que estos módulos ya están vinculados en el flujo de trabajo gestionado de Expo, puede empezar a utilizarlos inmediatamente después de instalar el paquete npm. No requieren comandos de conexión nativa.

Depuración e inspección de su aplicación

Debugging es directo en Expo. Cuando se ejecuta , el paqueter Metro proporciona un menú de desarrolladores. En su dispositivo, sacude (o utilice el menú de depuración en pantalla en Android) para acceder a opciones:

• Recarga – recargar el paquete JavaScript.
• Inspector abierto – abre React DevTools en un navegador para el inspector de componentes.
• Retrocede la JS remota Debugging – permite depurar en Chrome DevTools (puedes establecer puntos de ruptura en tu JavaScript).
• Mostrar Inspector de Elementos – toque en elementos de la UI para ver sus props y estilos.

Para las solicitudes de red, puede utilizar herramientas como React Native Debugger] o el inspector de red integrado en Chrome DevTools cuando se encuentra depuración remota. Además, los registros de Expo aparecen en el terminal donde se inició el servidor, mostrando rastros de pila y salida de consola.log.

Utilizando Flipper con Expo

Si prefieres el depurador Flipper de Facebook, puedes configurar el flujo de trabajo desnudo de Expo para apoyarlo, pero para el flujo de trabajo gestionado, las herramientas incorporadas son generalmente suficientes. Muchos desarrolladores confían en Los propios registros de desarrolladores de Expo y Reactar DevTools] para el 90% de tareas de de depuración.

Estado en una aplicación Expo

Las aplicaciones de Expo son React aplicaciones nativas, así que la administración del estado funciona exactamente igual.

• React Context] y Reducer para un estado simple a moderadamente complejo.
• Zustand] o Jotai para una biblioteca estatal ligera y libre de calderas.
• Redux Toolkit para aplicaciones a gran escala con muchas secciones de estado interconectadas.

Expo no impone ninguna opción específica. Para principiantes, comenzando con los ganchos incorporados de React se recomienda. Siempre puede migrar a una solución más sofisticada más adelante.

Ejemplo con React Context:

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
 const [theme, setTheme] = useState('light');
 return (
 <ThemeContext.Provider value={{ theme, setTheme }}>
 {children}
 </ThemeContext.Provider>
 );
}
export const useTheme = () => useContext(ThemeContext);

Pruebas de tu aplicación

Expo apoya Jest fuera de la caja. Ejecutar y configurar Jest en package.json. Puedes escribir pruebas unitarias para tus componentes y instantáneas. Para pruebas finales a extremos, Detox funciona bien pero requiere construcciones nativas. Para el flujo de trabajo gestionado, considere Maestro[un]

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import App from '../App';

test('button shows alert', () => {
 const { getByText } = render(<App />);
 fireEvent.press(getByText('Click Me'));
 // Assert that Alert was called (use jest.spyOn)
});

{
 "expo": {
 "updates": {
 "url": "https://u.expo.dev/YOUR_PROJECT_ID",
 "enabled": true
 }
 }
}