React Native es un framework de código abierto, cuyo funcionamiento principal es crear aplicaciones para diferentes plataformas, tanto iOS, Android y aplicaciones Web. Fue desarrollado por la comunidad de Facebook en el año 2015.
Funcionamiento de React Native
El funcionamiento principal de React Native se hace a través de mensajes en Javascript. Sin embargo proporciona el framework una vía para que los desarrolladores también puedan utilizar código nativo del lenguaje, por ejemplo Swift u Objective-C para iOS y Kotlin o Java para Android.
Para llevar a cabo el desarrollo con React Native, requerimos la instalación de los paquetes requeridos para su instalación, por ejemplo Node.js, los cuáles veremos en la siguiente sección:
Prerrequisitos para instalar React Native
Previamente a la instalación de React Native, requerimos instalar Node.js. Para instalar Node.js, podemos seguir la guía de instalación desde su sitio oficial, o bien podemos seguir los siguientes pasos:
Instalación de Node.js
Para instalar Node.js, en primer lugar hacemos la descarga del paquete desde su sitio oficial, de acuerdo con el sistema operativo que tengamos, por ejemplo Windows, MacOS o Linux, descomprimir e instalar el paquete. No obstante también podemos instalarlo por un manejador de paquetes.
La forma más sencilla para instalar Node.js con un manejador de paquetes se muestra en el sitio de Node.js, en donde se muestra la instalación para Windows, MacOS y varias distribuciones de Linux. En el caso de iOS, vas a requerir instalarlo en MacOS, y lo tomaremos como ejemplo para la instalación de Node.js
Instalación de Node.js en MacOS
Para instalar Node.js en MacOS se puede utilizar alguna de las siguientes formas:
- Con Homebrew: brew install node
- Con MacPorts: port install nodejs7
- Con pkgsrc: pkgin -y install nodejs
- O instalando Node.js desde su fuente original:
curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node-(.*)\.pkg.*|\1|p')}.pkg" > "$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"
Instalación de Node.js en Windows
Ejecutamos el instalador descargado directamente desde su sitio web.
Instalación de React Native para iOS
La instalación de React Native para usarse en iOS requiere de Xcode, el cual se encuentra exclusivamente en equipos con el sistema operativo MacOS.
Como primer paso instalamos Node.js (por lo menos la versión 10.0), tal y como se mostró en la sección anterior. Posteriormente instalamos Watchman utilizando Homebrew utilizando el siguiente comando en consola:
brew install watchman
Instalación de Xcode
Para hacer uso de React Native en iOS requerimos instalar Xcode. Xcode es el IDE de desarrollo para aplicaciones iOS y es muy fácil instalarlo directamente desde la App Store.
Instalación de Xcode Command Line Tools
La instalación de las herramientas para la línea de comandos de Xcode se hace pulsando en el menú Xcode -> Preferences, ir a la sección Locations y seleccionar la versión más reciente en Xcode Command Line Tools, tal y como se muestra en la siguiente imagen:
Instalar un simulador de iOS y Cocoapods
El simulador de iOS se instala directamente en Xcode -> Preferences -> Components. Cocoapods requiere el manejador de versiones de Ruby (gem) como prerrequisito. La instalación más simple de Cocoapods es a través del siguiente comando:
sudo gem install cocoapods
Crear una nueva aplicación de React Native para iOS
Para crear una nueva aplicación para React Native, es suficiente iniciar ejecutar el siguiente comando:
npx react-native init miproyecto
En donde miproyecto es el nombre del proyecto que deseas crear para utilizarse con React Native.
Ejecutar una aplicación de React Native para iOS
Para ejecutar cualquier aplicación de React Native, debemos ejecutar Metro, el cual es un constructor de Javascript, el cual toma todo el código que tenemos, así como sus dependencias, para crear un solo archivo Javascript. Su ejecución se realiza desde la raíz del proyecto en React Native, y se hace con el siguiente comando:
npx react-native start
Para iniciar la aplicación, en la consola ejecutamos también en la raíz del proyecto en React Native el siguiente comando para ejecutarlo con ambiente iOS:
npx react-native run-ios
Editar una aplicación de React Native para iOS
Para editar una aplicación de React Native, procedemos a editar el archivo App.js, éste archivo de Javascript contiene el concentrado de nuestro código. Una vez realizada cualquier modificación, procedemos a recargar la aplicación con command + R.
Instalación de React Native para Android
Para ejecutar aplicaciones con React Native con Android, requerimos Android Studio y algunas dependencias que varían de acuerdo al sistema operativo, las cuáles les mostraré a continuación.
Instalación de Android Studio
La instalación de Android Studio se realiza a través del instalador descargado desde su sitio. El instalador lo ejecutamos y seguimos las instrucciones de instalación, solo verificando que se encuentren seleccionadas las opciones siguientes:
- Android SDK
- Android SDK Platform
- Android Virtual Device
- Si no utilizas Hyper-V: Performance (Intel ® HAXM)
Instalación para Android en MacOS
Requerimos como requisitos previos instalar Node.js, Watchman y el kit de desarrollo Java. Para instalar éstos requerimentos, lo podemos resumir en las siguientes tres líneas de comandos:
brew install node brew install watchman brew cask install adoptopenjdk/openjdk/adoptopenjdk8
Configurar Android Studio
La configuración de React Native para Android Studio requiere al menos la versión de Android 10. Para ello seguimos éstos sencillos pasos:
- Seleccionamos Configuración -> SDK Manager. También está disponible desde Appearance & Behavior -> System Settings -> Android SDK.
- Seleeccionar las opciones Android SDK Platform 29 y Intel x86 Atom_64 System Image (o Google APIs Intel x86 Atom System Image)
- En la pestaña SDK tools -> Show Package Details ver que Android SDK Build-Tools se encuentre al menos en la versión 29.0.2
Configurar Android Home
Para configurar las variables de entorno requeridas, procedemos a agregar las siguientes líneas de comandos a los archivos $HOME/.bash_profile o bien $HOME/.bashrc.
export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools
Después cargamos la configuración utilizando el comando
source $HOME/.bash_profile
Iniciar una nueva aplicación
Como lo vimos en el apartado de iOS, para iniciar una nueva aplicación en Android Studio, utilizamos el comando (suponiendo que el nuevo proyecto queremos llamarlo miproyecto)
npx react-native init miproyecto
Ejecutar una nueva aplicación
Para ejecutar una nueva aplicación, también utilizamos los siguientes comandos, el primero para iniciar React Native y el segundo para definir el ambiente, que en éste caso es Android:
npx react-native start npx react-native run-android
Editar la aplicación
Para editar una aplicación, modificamos el archivo App.js, el cual es nuestro archivo concentrado en Javascript. Al finalizar, procedemos a recargar la aplicación utilizando la opción Reload del menú Developer.
Instalación para Android en Windows y Linux
Las instrucciones para instalación en los ambientes de Windows y Linux se pueden encontrar en el sitio oficial. Los procedimientos son muy similares a los efectuados en MacOS, con la diferencia de los paquetes, dependencias y comandos.
Muchas Gracias! había intendado de muchas maneras y no lo lograba, ya esta corriendo todo perfectamente! Gracias por tu tiempo y dedicación
Denada Sebastián, que bueno que ya quedó!