15. Como ejecutar la aplicacion en Android

 

Tutorial: Cómo Ejecutar la Aplicación en Android

En este tutorial aprenderás a ejecutar tu aplicación React Native en un emulador o dispositivo Android, solucionando problemas comunes de configuración inicial.

🎯 Objetivo del Tutorial

Ejecutar correctamente tu aplicación React Native en Android, entendiendo el proceso de compilación y los scripts disponibles.

📦 Paso 1: Entender package.json y Scripts

Estructura del package.json:

json

{

  "name": "MiPrimeraApp",

  "version": "0.0.1",

  "private": true,

  

  "scripts": {

    "android": "react-native run-android",    // Ejecuta en Android

    "ios": "react-native run-ios",            // Ejecuta en iOS (solo macOS)

    "start": "react-native start",            // Inicia servidor Metro

    "lint": "eslint .",                       // Analiza código

    "test": "jest"                            // Ejecuta tests

  },

  

  "dependencies": {

    "react": "18.2.0",                        // Dependencias runtime

    "react-native": "0.72.0"

  },

  

  "devDependencies": {

    "@babel/core": "^7.20.0",                 // Dependencias desarrollo

    "@types/react": "^18.0.24",

    "@types/react-test-renderer": "^18.0.0",

    "jest": "^29.2.1",

    "typescript": "^4.8.4"

  }

}

Scripts Explicados:

Script

Comando equivalente

Función

npm run android

react-native run-android

Compila y ejecuta en Android

npm run ios

react-native run-ios

Compila y ejecuta en iOS (macOS)

npm start

react-native start

Inicia servidor Metro (bundle JS)

npm test

jest

Ejecuta pruebas unitarias

npm run lint

eslint .

Analiza calidad de código

⚠️ Paso 2: Problema Común en Primera Ejecución

¿Por qué falla npm run android la primera vez?

React Native necesita compilar dependencias nativas que no se descargan automáticamente con el comando CLI.

Síntomas del error:

bash

# Al ejecutar npm run android por primera vez:

✗ FAILURE: Build failed with an exception.


* What went wrong:

Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.

> Could not resolve all task dependencies for configuration ':app:debugCompileClasspath'.

   > Could not find com.facebook.react:react-native:0.72.0.

🔧 Paso 3: Solución - Compilar con Android Studio Primero

Método A: Usar Android Studio (Recomendado para primera vez)

  1. Abrir el proyecto Android en Android Studio:

  2. bash

# Navega a tu proyecto

cd MiPrimeraApp


# Abre Android Studio manualmente

# O desde terminal (si está en PATH):

  1. studio android

  2. En Android Studio:

  3. text

File → Open → Selecciona carpeta "android" dentro de tu proyecto

  1. Ejemplo: MiPrimeraApp/android

  2. Esperar sincronización de Gradle:

    • Aparecerá barra de progreso inferior

    • Android Studio descargará dependencias nativas

    • Espera hasta que termine (5-10 minutos)

  3. Ejecutar desde Android Studio:

  4. text

Botón Run (▶) verde en barra superior

  1. O Shift + F10

Verificar éxito en Android Studio:

bash

# Deberías ver en consola de Android Studio:

> Task :app:installDebug

Installing APK 'app-debug.apk' on 'Pixel_5_API_33(AVD) - 13' for app:debug

Installed on 1 device.


BUILD SUCCESSFUL in 45s

💻 Paso 4: Ejecutar desde Terminal (Después de Android Studio)

Una vez compilado con Android Studio:

bash

# Terminal 1 - Iniciar servidor Metro (mantener abierto)

npm start


# Terminal 2 - Ejecutar aplicación

npm run android

Proceso esperado:

bash

# Verás algo como esto:

info Starting JS server...

info Installing the app...


> Task :app:installDebug

Installing APK 'app-debug.apk' on 'Pixel_5_API_33(AVD) - 13' for app:debug

Installed on 1 device.


BUILD SUCCESSFUL in 30s

📱 Paso 5: Entender el Flujo de Ejecución

Arquitectura de Ejecución:

text

1. npm start → Servidor Metro (puerto 8081)

   │

   └─ Bundle JavaScript → index.js + App.js

   

2. npm run android → Gradle Build

   │

   └─ APK nativo + Conexión a Metro Server

   

3. Emulador/Dispositivo

   │

   ├─ Código nativo (Java/Kotlin)

   └─ JavaScript Bundle (desde Metro)

Verificar conexión:

  1. En emulador: Sacude dispositivo (Ctrl+M en emulador)

  2. Menú Dev: Selecciona "Debug JS Remotely"

  3. Chrome se abre: http://localhost:8081/debugger-ui/

  4. Consola Chrome: Ver logs de JavaScript

🐛 Paso 6: Solución de Problemas Comunes

Problema 1: Emulador no detectado

bash

# Verificar dispositivos disponibles

adb devices


# Si no aparece:

# 1. Reiniciar adb

adb kill-server

adb start-server


# 2. Verificar que el emulador esté ejecutándose

# 3. En Android Studio: Tools → AVD Manager → Iniciar

Problema 2: Error "SDK location not found"

bash

# Crear archivo local.properties en android/

# Windows:

echo sdk.dir=%ANDROID_HOME% > android/local.properties


# macOS/Linux:

echo "sdk.dir=$ANDROID_HOME" > android/local.properties

Problema 3: Puerto 8081 ocupado

bash

# Verificar proceso usando puerto 8081

# Windows:

netstat -ano | findstr :8081


# macOS/Linux:

lsof -i :8081


# Terminar proceso o cambiar puerto:

npm start -- --port 8088

Problema 4: Gradle build falla

bash

# Limpiar caché de Gradle

cd android

./gradlew clean


# Volver y reinstalar dependencias

cd ..

rm -rf node_modules

npm install

🔍 Paso 7: Navegar por el Código en VS Code

Entender el flujo de renderizado:

  1. Archivo raíz: index.js

  2. javascript

import {AppRegistry} from 'react-native';

import App from './App';           // Importa componente App

import {name as appName} from './app.json';


  1. AppRegistry.registerComponent(appName, () => App);

  2. Ir a definición del componente App:

  3. bash

# Método 1: Ctrl + clic (Windows) / Cmd + clic (macOS) en './App'

# Método 2: Click derecho → "Go to Definition"

  1. # Método 3: F12 cuando el cursor está sobre 'App'

  2. Archivo App.js:

  3. javascript

// Componente principal que se renderiza

const App = () => {

  return (

    <View style={styles.container}>

      <Text>¡Hola Mundo React Native!</Text>

    </View>

  );

  1. };

Atajos útiles en VS Code:

  • Ctrl+P → Buscar archivos

  • Ctrl+Shift+F → Buscar en todos los archivos

  • Ctrl+` → Abrir/cerrar terminal

  • Ctrl+Shift+E → Explorador de archivos

🚀 Paso 8: Método Avanzado - Ejecución Directa

Después de la primera compilación exitosa:

Opción A: Dos terminales separadas

bash

# Terminal 1 (mantener abierta)

npm start


# Terminal 2 (ejecutar app)

npm run android

Opción B: Usar Metro en background

bash

# Iniciar Metro en background

npm start &


# Esperar 5 segundos y ejecutar

sleep 5 && npm run android

Opción C: Script personalizado

json

// Agregar en package.json

"scripts": {

  "android-dev": "npm start & sleep 5 && npm run android",

  "android-clean": "cd android && ./gradlew clean && cd .. && npm run android"

}

📊 Paso 9: Verificar que Todo Funciona

Checklist de éxito:

  1. Servidor Metro corriendo:

  2. bash

# Deberías ver:

Welcome to Metro v0.76.0

  1. Fast Refresh: enabled

  2. APK instalada en dispositivo:

  3. bash

# Ver en emulador:

Installed on 1 device.

  1. BUILD SUCCESSFUL

  2. App visible en emulador:

    • Pantalla blanca con texto

    • Sin errores rojos

    • Menú Dev accesible (sacudir)

  3. Fast Refresh funcionando:

    • Editar App.js

    • Guardar (Ctrl+S)

    • Cambios visibles inmediatamente

🧪 Paso 10: Depuración y Desarrollo

Herramientas de desarrollo:

  1. React DevTools:

  2. bash

npm install -g react-devtools

  1. react-devtools

  2. Debug JS Remotely:

  3. text

Emulador → Sacudir → Debug JS Remotely

  1. Chrome abre → F12 para consola

  2. Logs de Android:

  3. bash

# Ver logs del dispositivo

adb logcat | grep -E "ReactNative|ReactNativeJS"


# Logs específicos de tu app

  1. adb logcat | grep "MiPrimeraApp"

Perfiles de ejecución:

bash

# Debug (con servidor Metro)

npm run android


# Release (APK independiente)

cd android && ./gradlew assembleRelease


# Variante específica

cd android && ./gradlew installDebug

✅ Resumen de Comandos Clave

Situación

Comando

Descripción

Primera vez

Abrir android/ en Android Studio

Compila dependencias nativas

Después primera compilación

npm start + npm run android

Ejecuta normalmente

Limpieza

cd android && ./gradlew clean

Limpia caché Gradle

Reinstalar

rm -rf node_modules && npm install

Reinstala dependencias

Cambiar puerto

npm start -- --port 8088

Usa puerto alternativo

Logs

adb logcat

Ver logs del dispositivo

🎉 ¡Éxito!

Has logrado ejecutar tu aplicación React Native en Android. Recuerda:

✅ Primera vez: Compilar con Android Studio
✅ Subsiguientes: npm start + npm run android
✅ Fast Refresh: Cambios en tiempo real
✅ Depuración: Menú Dev en emulador

📚 Próximos Pasos

  1. Modificar App.js: Cambiar texto y estilos

  2. Agregar componentes: Botones, imágenes, inputs

  3. Implementar navegación: Múltiples pantallas

  4. Conectar APIs: Consumir datos de internet

  5. Publicar app: Generar APK para Google Play Store

🆘 Recursos Adicionales

¡Perfecto! Ahora tu aplicación React Native está ejecutándose en Android. Sigue experimentando y en el próximo tutorial aprenderemos a ejecutarla en iOS (si tienes macOS).

Comentarios

Publicar un comentario

Entradas más populares de este blog

Guía Paso a Paso para Entender React Native (antes del Tutorial)

  1. 📱 ¿Qué es React Native? React Native es un  framework para crear aplicaciones móviles nativas  usando  JavaScript y React . A diferencia de las apps web, genera componentes nativos reales (no WebViews). Comparación con React Web: React Web React Native <div> <View> <span> ,  <p> <Text> <input> <TextInput> onClick onPress CSS StyleSheet (JavaScript) 2. 🎯 Prerrequisitos Básicos A) Conocimientos previos necesarios: ✅ JavaScript ES6+ (funciones flecha, destructuración, spread operator) ✅ Conceptos básicos de React (si ya sabes React web, ¡estás al 90%!) Componentes Props (propiedades) ✅ Hooks (useState, useEffect) B) Si NO sabes React, necesitas esto primero: javascript // 1. Componente funcional function MiComponente ( ) { return < View > Hola Mundo < / View > ; } // 2. Props (propiedades que recibe un componente) function Saludo ( props ) { return < Text > Hola { props . nombre } ...
Leer más

Tutorial: Aplicación React Native para Agregar Tareas - Minimalista

  Voy a crear una aplicación React Native simple que permite agregar tareas a una lista usando un formulario con un solo input. Será minimalista y bien explicado paso a paso. Estructura del Proyecto text react-native-todo-app/ ├── src/ │ ├── components/ │ │ ├── TaskForm.js │ │ └── TaskList.js │ └── App.js ├── package.json └── README.md Paso a Paso 1. Crear el proyecto React Native bash npx react-native init ReactNativeTodoApp cd ReactNativeTodoApp 2. Crear el componente App.js jsx import React , { useState } from 'react' ; import { View , Text , StyleSheet , SafeAreaView } from 'react-native' ; import TaskForm from './src/components/TaskForm' ; import TaskList from './src/components/TaskList' ; function App ( ) { // Estado para almacenar la lista de tareas const [ tasks , setTasks ] = useState ( [ ] ) ; // Función para agregar una nueva tarea const addTask = ( taskText ) => { // Crear un o...
Leer más

5. Vista Rapida: Estructura Projecto Base

  Tutorial: Reproducir la Estructura de un Proyecto Base de React Native En este tutorial aprenderás a crear y entender la estructura básica de un proyecto en React Native, utilizando la imagen adjunta como referencia y los conceptos proporcionados. 🎯 Objetivo del Tutorial Reproducir la estructura básica de un proyecto React Native y comprender la función de cada carpeta y archivo esencial. 📁 Estructura de Carpetas y Archivos (Basada en la Imagen) text tu-proyecto/ │ ├── .bundle/ ├── .yscode/ ├── android/          # Código nativo para Android ├── ios/              # Código nativo para iOS ├── node_modules/     # Dependencias externas instaladas ├── src/              # Código fuente principal de la app ├── vendor/ │ ├── .eslintrc.js      # Configuración de ESLint ├── .gitignore        # Archivos a ignorar por Git ├── .node-version   ...
Leer más