Cómo ejecutar una aplicación React Native en iOS

Recientemente comencé a desarrollar una aplicación React-Native en iOS. Esta fue mi primera incursión en el desarrollo de aplicaciones nativas. Me sorprendió la facilidad y el nivel de abstracción que proporciona la interfaz de línea de comandos de React-Native. También tenía curiosidad por entender qué sucede bajo el capó cuando React-Native ejecuta una aplicación en un dispositivo o simulador.

Pasé mucho tiempo revisando el código relevante. No había un solo lugar que resumiera lo que React-Native hace para que la aplicación funcione. En parte, esa fue la motivación para crear esta pieza. Quiero ayudar a cualquier otra persona que esté comenzando de nuevo con el desarrollo de aplicaciones React-Native.

React-Native proporciona utilidades de línea de comandos para ejecutar una aplicación en simuladores / dispositivos iOS y Andriod. Sin más preámbulos, intentemos comprender el qué y el cómo del proceso para ejecutar aplicaciones React-Native en iOS.

Entre bastidores

React-native proporciona esta ingeniosa utilidad llamada init. Crea una plantilla de aplicación nativa para ti. Esta plantilla crea los archivos de proyecto de Xcode relevantes en la carpeta iOS de la aplicación.

Las aplicaciones React-Native se pueden iniciar en simuladores / dispositivos físicos de iOS ejecutando el siguiente comando en la carpeta raíz de una aplicación:

react-native run-ios

La ejecución exitosa abriría la aplicación en un simulador o un dispositivo conectado. Para que esto suceda, hay un montón de pasos que se ejecutan cuando ejecutamos el comando anterior.

comando run-ios

React-Native proporciona una serie de utilidades de línea de comandos para trabajar con la aplicación. Estos se pueden encontrar en la carpeta local-cli del módulo de nodo React-Native. run-ios es una de esas utilidades que invoca la runIOS()función definida en el archivo runIOS.js. run-ios acepta ciertas opciones como:

#Launch the app on a specific simulatorreact-native run-ios --simulator "iPhone 5"
#Pass a non-standard location of iOS directoryreact-native run-ios --project-path "./app/ios"
#Run on a connected device, e.g. Max's iPhonereact-native run-ios --device "Max\'s iPhone"
#Build the app in Release modereact-native run-ios --configuration Release

Selección de dispositivo / simulador

Cuando no se especifica ningún dispositivo, run-iosla aplicación se iniciaría en modo de depuración en un simulador de forma predeterminada. Esto se hace ejecutando una serie de xcrun simctlcomandos. Primero comprobarían la lista de simuladores disponibles en Mac, elegirían uno entre ellos y luego iniciarían el simulador seleccionado.

Alternativamente, si desea ejecutar la aplicación en un dispositivo físico, conecte el dispositivo a la Mac y luego pase los detalles del dispositivo al run-ioscomando.

El siguiente paso es construir el proyecto Xcode de la aplicación.

Creación de código de aplicación

Por lo general, el proyecto Xcode de la aplicación React-Native se puede encontrar en la carpeta de iOS presente en la carpeta raíz. El proyecto Xcode se construye usando el xcodebuildcomando. Cualquier opción especificada run-ios, como la configuración, etc. se pasa a este comando.

De forma predeterminada, el proyecto Xcode está integrado en el esquema de depuración. Una vez que el proyecto se ha construido con éxito, la aplicación se instala y ejecuta en el simulador o el dispositivo conectado.

Paquete de código de aplicación en modo de depuración

Durante el proceso de desarrollo, React Native carga nuestro código JavaScript dinámicamente en tiempo de ejecución. Para esto, necesitamos un servidor para empaquetar el código de nuestra aplicación y proporcionarlo según sea necesario.

Mientras que el proyecto Xcode se está construyendo en modo de depuración, también se inicia una instancia del servidor Metro en paralelo. Metro es el paquete utilizado por las aplicaciones creadas por la interfaz de línea de comandos (CLI) de React-Native. Se utiliza para agrupar el código de nuestra aplicación en desarrollo. Esto nos ayuda con una depuración más rápida y sencilla al permitir la recarga en caliente, etc.

El servidor Metro está configurado para iniciarse en el puerto 8081 de forma predeterminada. Una vez que se inicia la aplicación en el simulador, se envía una solicitud al servidor para el paquete.

#Code in AppDelegate.m sends the request for the bundle: #index.bundle to serverjsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"MobileApp initialProperties:nil launchOptions:launchOptions];

A continuación, el servidor descarga todas las dependencias necesarias, agrupa el código de la aplicación JavaScript y lo envía de vuelta a la aplicación. Después de este paso, puede ver la aplicación funcionando en el simulador o en un dispositivo conectado.

Paquete de código de aplicación en modo de lanzamiento: empaquetado previo del paquete de JavaScript

En el modo de lanzamiento, tenemos que empaquetar previamente el paquete de JavaScript y distribuirlo dentro de nuestra aplicación. Hacer esto requiere un cambio de código para que sepa cargar el paquete estático. En el archivo AppDelegate.m, cambie jsCodeLocation para que apunte al paquete estático si no está en modo de depuración.

#ifdef DEBUGjsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#elsejsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif

Esto ahora hará referencia al main.bundlearchivo de recursos. Este archivo se crea durante la Bundle React Native code and imagesfase de compilación en Xcode. Durante esta fase,react-native-xcode.shse ejecuta el scriptque agrupa el código de la aplicación JavaScript. Este script se puede encontrar en la carpeta de scripts del módulo de nodo React-Native.

Construyendo la aplicación desde Xcode

Alternativamente, el proyecto Xcode también se puede construir dentro de Xcode en Mac en lugar de usar la CLI React-Native. Una vez hecho esto, la aplicación se puede iniciar en un simulador seleccionado de las opciones de Xcode o en un dispositivo físico conectado.

Espero que esto te haya ayudado a comprender los distintos pasos que ocurren cuando ejecutamos un react-native run-ioscomando simple que mágicamente abre una aplicación en iOS.

Algunas partes de la información proporcionada aquí se han obtenido de la página de inicio de React-Native. El resto es producto de mí husmeando en el código :)