29. Windows: Android Emulator-fh

 

Configurando el Emulador de Android en Windows para Expo

https://via.placeholder.com/800x450

Creando y Configurando un Dispositivo Virtual en Android Studio

¡Es hora de configurar nuestro emulador de Android en Windows para probar nuestras apps de Expo sin necesidad de un dispositivo físico!

(Si usas Mac, consulta los tutoriales específicos para macOS).

1. Abrir el Administrador de Dispositivos Virtuales (AVD Manager)

  1. En Android Studio, ve a:
    More Actions → Virtual Device Manager.

  2. Haz clic en Create Device para configurar un nuevo emulador.

2. Seleccionar un Modelo de Dispositivo

  • Puedes elegir un modelo preconfigurado (ej: Pixel 8 Pro) o crear uno personalizado.

  • En este ejemplo, configuraremos un "Pixel 9 Pro XL" con:

    • Pantalla: 6.8"

    • Resolución: 1344 × 2992 px

    • RAM: 4 GB (ajústalo según tu PC).

3. Configurar la Imagen del Sistema

  1. Selecciona la versión más estable de Android (API 34 - Android 14).
    (Evita versiones beta como Android 15, ya que pueden tener problemas con Expo Go).

  2. Opciones avanzadas:

    • Graphics: Usa Hardware (GPU) si tu PC tiene tarjeta gráfica dedicada.

    • RAM: 4-8 GB (dependiendo de los recursos de tu equipo).

    • Almacenamiento interno: 5 GB (suficiente para Expo).

  3. Haz clic en Finish para crear el dispositivo.

4. Iniciar el Emulador

  1. En el AVD Manager, selecciona tu dispositivo y haz clic en Play.
    (La primera vez puede tardar unos minutos en iniciar).

  2. Una vez abierto, minimiza Android Studio (no es necesario mantenerlo abierto).

5. Probar tu App de Expo en el Emulador

  1. En tu proyecto de Expo, ejecuta:

    bash
    npm start

  2. En la terminal de Expo, presiona:

    • a para abrir la app en el Android Emulator.

    • r para recargar si hay errores.

  3. ¡Listo! Los cambios en tu código (App.tsx) se reflejarán al guardar (Ctrl + S).

Solución de Problemas Comunes

🔹 Si la app no se actualiza:

  • Presiona Ctrl + M (Windows) en el emulador y selecciona Reload.

  • Cierra el emulador y vuelve a presionar a en la terminal de Expo.

🔹 Si el emulador falla:

  • Verifica que Android Studio tenga instalado:

    • Android Emulator (en SDK Tools).

    • HAXM (si usas Intel) o Hyper-V (para AMD).

Conclusión

Ahora puedes desarrollar y probar tus apps de Expo directamente en el Android Emulator sin complicaciones.

🚀 ¿Qué sigue?
En la próxima guía, configuraremos el iOS Simulator (para Mac) y optimizaremos el rendimiento del emulador.


Comentarios

Publicar un comentario

Entradas más populares de este blog

4.2-12. Componentes esenciales

    Componentes esenciales de React Native (Vignatti) 📱 En este video, exploramos y utilizamos los  componentes esenciales de React Native (Vignatti) , junto con los  NAC Decks . Estamos en la fase final de los fundamentos que todo desarrollador debe dominar antes de empezar un proyecto. 🔹  ¿Qué veremos? Equivalencia con HTML : Comparativa de los componentes de Vignatti vs. HTML. Funcionamiento clave : Cómo usar cada componente en proyectos reales. 📌 Componentes principales: 1️⃣  View  → Como un  div  en HTML. Es un contenedor que puede anidar otros componentes. Dato clave : Si el contenido excede la pantalla, ¡usa  ScrollView  para evitar cortes! 2️⃣  Image  → Similar a  <img>  en HTML. Propiedad  source  para cargar imágenes (local o URL). ¡Obligatorio!  Asignarle un estilo con  width  y  height . 3️⃣  Text  → Equivalente a  <p> ,  <span> ...
Leer más

7.5-10. ¿Como funcionan los estilos en React Native?

  ¿Cómo funcionan los estilos en React Native? En React Native, los estilos no usan CSS tradicional, sino un sistema basado en  objetos JavaScript  similar. ¡Te explico cómo dominarlo! 📌 Componente clave:  StyleSheet Es el equivalente a una hoja de estilos CSS, pero en formato de objeto: javascript import { StyleSheet } from 'react-native' ; const styles = StyleSheet . create ( { contenedor : { borderRadius : 10 , borderWidth : 2 , borderColor : '#000' , } , titulo : { fontSize : 19 , fontWeight : 'bold' , } , } ) ; 🔥 Características importantes: Soporte por componente : Cada elemento (View, Text, etc.) acepta estilos con atributos específicos. Múltiples estilos : Pásalos como un  arreglo : javascript < Text style = { [ styles . titulo , styles . centrado ] } > Hola < / Text > Estilos dinámicos : Usa condicionales para cambiar estilos: javascript < Text style = { [ styles . titulo , isActive...
Leer más

7.1-19. Creación de estilos

  Creación de Estilos en React Native: Buenas Prácticas En el post anterior, creamos nuestro primer componente en React Native. Hoy vamos a profundizar en cómo  estructurar correctamente los estilos  para mantener un código limpio y escalable. 🚫 Evita los Estilos "Inline" En el ejemplo anterior, definimos los estilos directamente en el componente: jsx < View style = { { width : 50 , height : 50 , backgroundColor : 'red' } } /> Aunque funciona,  no es una buena práctica  porque: Dificulta el mantenimiento en proyectos grandes. Hace el código menos legible. No permite reutilizar estilos. ✅ La Forma Correcta: Objetos de Estilo React Native recomienda definir los estilos en un  objeto separado  usando  StyleSheet.create() : jsx import { View , StyleSheet } from 'react-native' ; function MiComponente ( ) { return < View style = { styles . mainContainer } /> ; } const styles = StyleSheet . create ( { mainCont...
Leer más