En este tutorial, veremos cómo programar una aplicación para smartphones utilizando React Native y VSCode. React Native es una potente herramienta para crear aplicaciones multiplataforma (Android, IOs) utilizando el lenguaje JavaScript. Visual Studio Code es un editor de código para desarrollar en C++, Python y React Native.
Como parte de un proyecto Arduino o Raspberry Pi, hemos visto cómo crear una aplicación Android con App Inventor 2. Con React Native, aunque más complejo, podrás crear aplicaciones más avanzadas y desarrollar en Android e IOs.
Instalación de Node.js
Node.js es un entorno de ejecución Javascript para el desarrollo back-end y front-end.
Para instalar Node.js en su ordenador Windows, sólo tiene que descargar el instalador
Una vez instalado Node.js, tendrás acceso a npm (Node Package Manager), que te permitirá instalar los paquetes necesarios.
![](https://www.aranacorp.com/wp-content/uploads/verify-node-js-installation.png)
Instalación y configuración de Android Studio
Descargar e instalar Java JDK 11
Configure JAVA_HOME en las variables de entorno (C:\Archivos de Programa\Microsoft\jdk-11.0.17.8-hotspot\)
Descarga y ejecuta el instalador de Android Studio
Configurar ANDROID_HOME en las variables de entorno (C:\Users\ADMIN\AppData\Local\Android\Sdk)
Abra Android Studio. En la ventana de inicio, haga clic en Configurar y luego en Administrador de AVD.
Aquí puedes definir los dispositivos virtuales en los que probar tu aplicación.
![](https://www.aranacorp.com/wp-content/uploads/android-studio-avd-manager.png)
N.B.: La instalación y configuración de Android Studio y el correcto funcionamiento de los dispositivos virtuales puede depender de la instalación de Android SDK, Java SDK y Gradle, etc. Compruebe que las versiones son compatibles.
Instalación y configuración de Visual Studio Code
Para instalar Visual Studio Code, sólo tiene que descargar y ejecutar el instalador
Una vez instalado el software, puedes añadir las extensiones necesarias para el desarrollo bajo React Native con VSCode
![](https://www.aranacorp.com/wp-content/uploads/vscode-install-react-native-tools.png)
Creación de un proyecto React Native
Crea una carpeta con tu proyecto ReactNative y ábrela en VSCode
En el terminal,
npx react-native@latest init CustomApp
![](https://www.aranacorp.com/wp-content/uploads/vscode-create-react-native-project.png)
Instala las dependencias con yarn y lanza la aplicación
cd CustomApp npm install -g yarn yarn install npx react-native start
A continuación, pulse «a» para ejecutarlo en Android
![](https://www.aranacorp.com/wp-content/uploads/react-native-default-app-android.png)
Ver la aplicación en un dispositivo Android
En tu teléfono Android, en «Ajustes», ve a «Ajustes adicionales» y luego a «Opciones para desarrolladores». Busca la opción «Depuración USB» y actívala. Esto te permitirá instalar aplicaciones a través del puerto USB.
Puede comprobar que el dispositivo se ha detectado y configurado correctamente con el comando adb devices.
![](https://www.aranacorp.com/wp-content/uploads/windows-detect-android-devices.png)
Una vez configurado correctamente su dispositivo, si vuelve a lanzar la aplicación, ésta se descargará e instalará en el dispositivo.
![](https://www.aranacorp.com/wp-content/uploads/react-native-app-android-device.jpg)
Ya puedes desarrollar e instalar tu aplicación en un dispositivo.
N.B.: Si tiene dificultades para instalar un simulador o si no dispone de un dispositivo, también puede ver los resultados en CodeSandBox para probar su aplicación.
Generación de APK
Una vez que su aplicación ha sido probada y validada en un simulador o dispositivo real, puede generar el archivo APK. Este archivo puede descargarse en cualquier dispositivo con un SO compatible y utilizarse para instalar la aplicación.
En el archivo android/build.gradle, comprueba que la versión del SDK (nivel de API) se corresponde con la versión de la plataforma de destino
buildscript { ext { buildToolsVersion = "33.0.0" minSdkVersion = 21 compileSdkVersion = 33 targetSdkVersion = 33 // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP. ndkVersion = "23.1.7779620" } repositories { google() mavenCentral() } dependencies { classpath("com.android.tools.build:gradle:7.3.1") classpath("com.facebook.react:react-native-gradle-plugin") } }
En la raíz del proyecto CustomApp, introduzca los siguientes comandos en VS Code
cd android ./gradlew assembleRelease
Es posible limpiar la compilación antes de generar la compilación con el comando
./gradlew clean
![](https://www.aranacorp.com/wp-content/uploads/react-native-vs-code-build-apk.png)
Cambiar el icono de la aplicación
Los iconos de las aplicaciones se encuentran en la carpeta android
![](https://www.aranacorp.com/wp-content/uploads/react-native-default-icon.png)
Para sustituir los iconos predeterminados de la aplicación, es necesario crear iconos de distintos tamaños. Esto se puede hacer fácilmente con la herramienta IconKitchen, que te permite subir una imagen y generar todos los tamaños de iconos. Una vez que hayas descargado la carpeta IconKitchen-Output, puedes reemplazar las siguientes carpetas en la carpeta res de tu proyecto.
- mipmap-hdpi
- mipmap-mdpi
- mipmap-xhdpi
- mipmap-xxhdpi
- mipmap-xxxhdpi
![](https://www.aranacorp.com/wp-content/uploads/react-native-custom-icon.png)
N.B.: Modificar el nombre del archivo con el nombre del archivo original si es necesario o cambiar el nombre del archivo en AndroidManifest.xml
React Native: buenas prácticas
Hay distintas formas de hacer lo mismo, sobre todo en programación. Sin embargo, la experiencia de muchas personas demuestra que los buenos hábitos permiten trabajar con más eficacia.
- Añadir TypeScript para mejorar la lectura del código y evitar errores
- Utiliza estilos responsivos que se adapten a diferentes tamaños de pantalla
- Utilizar estilos en función de la plataforma
- Prefiera los componentes funcionales a los componentes de clase
- Crear un tema en el que se especifiquen los estilos de interfaz
- Definir las diferentes vías de acceso de los usuarios
Aplicaciones
- Crear aplicaciones IOs o Android para comunicarse con objetos conectados basados en Android, Raspberry Pi, ESP32, ESP8266, etc.
- Crear un terminal Bluetooth en Android