Esta es una traducción del artículo original del blogger bajo el seudónimo Soujanya PS. Es una profesional en su campo y le encanta no solo desarrollar aplicaciones y servicios, sino también escribir artículos al respecto. Aquí está su revisión sobre el lanzamiento de una aplicación iOS usando el marco React Native.
No hace mucho tiempo, comencé a usar React Native para aplicaciones iOS. Esta es mi primera inmersión profunda en un entorno de desarrollo de aplicaciones nativas. Observo que me sorprendió la facilidad de todo el proceso, así como el nivel de abstracción que proporciona la interfaz de línea de comandos React Native. En realidad, este fue uno de los factores que me impulsó a escribir sobre este marco. Me gustaría compartir mi propia experiencia con aquellos que acaban de comenzar a trabajar con él.
Skillbox recomienda: "Mobile Developer PRO" .
Le recordamos: para todos los lectores de "Habr": un descuento de 10.000 rublos al registrarse en cualquier curso de Skillbox con el código de promoción "Habr".
React Native proporciona herramientas de línea de comandos para ejecutar aplicaciones iOS y Android en emuladores y dispositivos. Intentemos comprender qué y cómo hacer para implementar una aplicación React Native para iOS.
Realmente lanzamiento
React Native proporciona una excelente utilidad llamada init. Proporciona una plantilla de aplicación, mientras crea archivos de proyecto Xcode relevantes en la carpeta iOS de esta aplicación.
A su vez, se puede iniciar tanto en el entorno del emulador de iOS como en el teléfono / tableta ingresando el siguiente comando en la carpeta raíz de la aplicación:
react-native run-iosLa ejecución exitosa del comando va acompañada del lanzamiento de la aplicación en el emulador o en el dispositivo. Te contamos lo que hay que hacer para esto.
Comando Run-ios
React Native proporciona al desarrollador varias utilidades de línea de comandos para interactuar con la aplicación. Se encuentran en la carpeta local-cli de los nodos del módulo React Native. Run-ios es una de las utilidades que ejecuta la función runIOS () definida en el archivo runIOS.js.
Run-ios le permite usar las siguientes opciones:
# Inicie la aplicación en un simulador específico
react-native run-ios: simulador "iPhone 5"
#Pasar una ubicación no estándar del directorio de iOS
react-native run-ios --project-path "./app/ios"
# Ejecutar en un dispositivo conectado, por ejemplo, el iPhone de Max
react-native run-ios --dispositivo "iPhone de Max"
# Construye la aplicación en modo Release
react-native run-ios: versión de configuraciónSelección de dispositivo / emulador
Si no se especifica el dispositivo, run-ios iniciará el modo de depuración de la aplicación en el emulador predeterminado. Esto es posible gracias a una serie de comandos xcrun / simctl. Primero, verifique la lista de emuladores disponibles, seleccione uno de ellos y cargue la aplicación en su entorno.
Si desea ejecutar la aplicación en un dispositivo físico, simplemente conéctela a su computadora portátil y configure los detalles a través de run-ios.
El siguiente paso es crear un proyecto de aplicación Xcode.
Código de aplicación
Por lo general, el proyecto de aplicación React Native Xcode se encuentra en la carpeta iOS en el directorio raíz. Un proyecto Xcode se crea usando el comando xcodebuild. Cualquier parámetro establecido previamente para run-ios se pasa a este comando.
Una vez que se crea el proyecto, la aplicación se instala y se inicia en el emulador o dispositivo conectado.
Agregar código de aplicación en modo de depuración
A lo largo del proceso de desarrollo, React Native carga dinámicamente su código. Para que todo salga bien y el código esté disponible según sea necesario, necesitará un servidor.
Mientras se depura el proyecto Xcode, el servidor Metro se inicia en paralelo con él. Lo utilizan las aplicaciones que se crean utilizando la interfaz de línea de comandos React Native. Todo esto le permite acelerar y simplificar el proceso utilizando el reinicio "en caliente" y otros métodos.
Por defecto, Metro escucha en el puerto 8081. Tan pronto como se inicia la aplicación en el emulador, se envía una solicitud al servidor.
#Code in AppDelegate.m sends the request for the bundle: #index.bundle to server jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"MobileApp initialProperties:nil launchOptions:launchOptions];
El servidor carga todas las dependencias necesarias, recopila el código JavaScript y lo envía a la aplicación. Después de este paso, puede ver la aplicación en ejecución en el emulador o en el dispositivo conectado.
Paquete JavaScript
En el modo de lanzamiento, primero debe empacar JavaScript, colocándolo en la aplicación. Para hacer esto, se requieren algunos cambios para proporcionar la capacidad de descargar un paquete estático. Debe cambiar jsCodeLocation en el archivo AppDelegate.m, que indica la ubicación del paquete estático fuera del modo de depuración:
#ifdef DEBUG jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@ fallbackResource:nil]; #else jsCodeLocation = [[NSBundle mainBundle] URLForResource:@ withExtension:@]; #endif
Ahora, esto es una indicación del archivo de recursos main.bundle que apareció durante el procesamiento del proyecto Xcode. En esta etapa, se ejecuta el script react-native-xcode.sh. Se puede encontrar en la carpeta de script del módulo React Native.
Crear una aplicación desde Xcode
También puede crear un proyecto Xcode directamente en Mac en lugar de usar React Native CLI. Después de crear la aplicación, también puede ejecutarla en el emulador seleccionado en las opciones de Xcode o en el dispositivo físico.
Espero que este material te haya ayudado a comprender los procesos que comienzan cuando se ejecuta el comando react-native run-ios, lo que crea magia y te permite ejecutar la aplicación en el entorno iOS.
Skillbox recomienda: