6. 1.1 Instalando android studio y emulador

 

6.1.1 Instalando Android Studio y configurando el emulador

¡Bienvenidos de nuevo! 👋 En esta entrada, vamos a configurar Android Studio y preparar nuestro emulador para desarrollar aplicaciones en React Native.

📌 Paso 1: Instalando Node.js

Antes de comenzar, necesitamos tener Node.js instalado (si no lo tienes). Node es esencial para trabajar con React Native y muchas otras tecnologías de desarrollo.

🔹 Descarga Node.js desde su página oficial.
🔹 Instálalo con las opciones predeterminadas (Next, Next, Finish).

⚙ Paso 2: Instalando Android Studio

  1. Descarga Android Studio desde su sitio oficial.

  2. Ejecuta el instalador y sigue los pasos (Next, Next, Finish).

  3. Al abrirlo por primera vez, instala los SDK necesarios (Acepta todo lo que sugiera).

🚀 Paso 3: Activando la virtualización (Hyper-V / BIOS)

Para que el emulador funcione correctamente, debemos activar la virtualización en la BIOS:

🔹 Si tienes Intel: Busca "Intel VT-x" o "Virtualization Technology" en la BIOS (entra presionando F2, F12, DEL al iniciar la PC).
🔹 Si tienes AMD: Busca "SVM Mode" o "AMD-V".

⚠ Importante: Sin esto, el emulador no funcionará o será extremadamente lento.

📱 Paso 4: Configurando el emulador (AVD Manager)

  1. Abre Android Studio y ve a "Virtual Device Manager".

  2. Crea un nuevo dispositivo ("Create Virtual Device").

  3. Elige un modelo con Play Store (ej: Pixel 7 Pro).

  4. Selecciona una versión estable de Android (ej: API 34).

  5. Finaliza la configuración y ejecuta el emulador (Start).

💡 Consejo: Si el emulador falla al iniciar, cierra y vuelve a intentarlo.

🔧 Paso 5: Configurando variables de entorno

Para que React Native reconozca Android Studio, debemos agregar la ruta del SDK a las variables de entorno:

  1. Busca "Editar variables de entorno del sistema" en Windows.

  2. Crea una nueva variable llamada ANDROID_HOME.

  3. Como valor, pega la ruta del SDK (puedes encontrarla en Android Studio > SDK Manager).

    • Ejemplo: C:\Users\[TuUsuario]\AppData\Local\Android\Sdk

  4. Aplica los cambios y reinicia la terminal.

✅ ¡Listo!

Ahora tienes todo configurado para empezar a desarrollar en React Native con Expo y Android Studio.

📢 ¿Problemas? Déjalos en los comentarios y te ayudaré.

En la próxima entrada, crearemos nuestra primera app y la ejecutaremos en el emulador. ¡No te la pierdas! 🚀

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