instalacion-28. Windows: Android Environment-FH

 

Configurando el Emulador de Android en Windows para Expo

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

Instalación y Configuración del Android Emulator

Si estás desarrollando con Expo en Windows, necesitarás configurar el Android Emulator para probar tus aplicaciones sin depender de un dispositivo físico. En este post, te guiaré paso a paso.

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

1. Descargar Android Studio

Antes de comenzar, asegúrate de tener instalado Android Studio.

2. Configurar el SDK de Android

  1. Abre Android Studio y ve a:
    More Actions → SDK Manager.

  2. En SDK Platforms, selecciona:

    • Android 14 (API 34) (Recomendado para compatibilidad con Expo Go).

  3. En SDK Tools, marca:

    • Android Emulator

    • Android SDK Build-Tools (versión 34)

    • Android SDK Platform-Tools

  4. Haz clic en Apply y espera a que se descarguen los componentes.

3. Configurar Variables de Entorno

A. Establecer ANDROID_HOME

  1. Copia la ruta del SDK (visible en SDK Manager).
    Ejemplo:

    text
    C:\Users\[TuUsuario]\AppData\Local\Android\Sdk

  2. Busca "Environment Variables" en Windows y:

    • Crea una nueva variable llamada ANDROID_HOME.

    • Pega la ruta del SDK.

B. Agregar platform-tools al PATH

  1. Abre Environment Variables nuevamente.

  2. En Path, añade:

    text
    %ANDROID_HOME%\platform-tools

  3. Verifica que funcione ejecutando en la terminal:

    bash
    adb --version

    (Deberías ver la versión instalada).

4. Próximos Pasos

En la próxima clase, configuraremos el Android Virtual Device (AVD) para ejecutar el emulador directamente desde Expo.

Conclusión

¡Listo! Ahora tienes todo lo necesario para trabajar con el Android Emulator en Windows.

🔹 ¿Problemas? Asegúrate de:

  • Reiniciar la terminal después de configurar las variables.

  • Usar Android 14 (API 34) para evitar conflictos con Expo Go.

🚀 ¿Listo para continuar? En el siguiente post, crearemos nuestro primer 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