Comment exécuter une application React Native sur iOS

J'ai récemment commencé à développer une application React-Native sur iOS. C'était ma première incursion dans le développement d'applications natives. J'ai été surpris par la facilité et le niveau d'abstraction fournis par l'interface de ligne de commande de React-Native. J'étais également curieux de comprendre ce qui se passe sous le capot lorsque React-Native exécute une application sur un appareil ou un simulateur.

J'ai passé beaucoup de temps à parcourir le code pertinent. Il n'y avait pas un seul endroit qui résumait ce que React-Native fait pour faire fonctionner l'application. C'était en partie la motivation pour créer cette pièce. Je souhaite aider toute autre personne qui repart à zéro avec le développement d'applications React-Native.

React-Native fournit des utilitaires de ligne de commande pour exécuter une application sur des simulateurs / appareils iOS et Andriod. Sans plus tarder, essayons de comprendre le quoi et le comment du processus pour exécuter les applications React-Native sur iOS.

Dans les coulisses

React-native fournit cet utilitaire soigné appelé init. Il crée un modèle d'application natif pour vous. Ce modèle crée les fichiers de projet Xcode appropriés dans le dossier iOS de l'application.

Les applications React-Native peuvent être lancées sur des simulateurs / appareils physiques iOS en exécutant la commande suivante dans le dossier racine d'une application:

react-native run-ios

Une exécution réussie ouvrirait l'application sur un simulateur ou un appareil connecté. Pour que cela se produise, il y a un tas d'étapes qui sont exécutées lorsque nous exécutons la commande ci-dessus.

commande run-ios

React-Native fournit un certain nombre d'utilitaires de ligne de commande pour fonctionner avec l'application. Celles-ci se trouvent dans le dossier local-cli du module de nœud React-Native. run-ios est l'un de ces utilitaires qui appelle la runIOS()fonction définie dans le fichier runIOS.js. run-ios accepte certaines options telles que:

#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

Sélection de périphérique / simulateur

Lorsqu'aucun appareil n'est spécifié, run-ioslancerait l'application en mode débogage sur un simulateur par défaut. Cela se fait en exécutant une série de xcrun simctlcommandes. Ils vérifieraient d'abord la liste des simulateurs disponibles sur Mac, en choisiraient un parmi eux, puis démarreraient le simulateur sélectionné.

Sinon, si vous souhaitez exécuter l'application sur un appareil physique, connectez l'appareil au Mac, puis transmettez les détails de l'appareil à la run-ioscommande.

L'étape suivante consiste à créer le projet Xcode de l'application.

Création du code d'application

Habituellement, le projet Xcode de l'application React-Native se trouve dans le dossier iOS présent sous le dossier racine. Le projet Xcode est construit à l'aide de la xcodebuildcommande. Toutes les options spécifiées, run-iostelles que la configuration, etc. sont transmises à cette commande.

Par défaut, le projet Xcode est construit dans le schéma de débogage. Une fois le projet construit avec succès, l'application est installée et lancée sur le simulateur ou l'appareil connecté.

Regroupement de code d'application en mode débogage

Au cours du processus de développement, React Native charge dynamiquement notre code JavaScript au moment de l'exécution. Pour cela, nous avons besoin d'un serveur pour regrouper le code de notre application et le fournir au besoin.

Alors que le projet Xcode est en cours de création en mode Débogage, une instance de serveur Metro est également démarrée en parallèle. Metro est le bundler utilisé par les applications créées par l'interface de ligne de commande (CLI) React-Native. Il est utilisé pour regrouper le code de notre application en développement. Cela nous aide à un débogage plus rapide et plus facile en permettant le rechargement à chaud, etc.

Le serveur Metro est configuré pour démarrer sur le port 8081 par défaut. Une fois l'application lancée dans le simulateur, une demande est envoyée au serveur pour le bundle.

#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];

Le serveur télécharge ensuite toutes les dépendances requises, regroupe le code de l'application JavaScript et le renvoie à l'application. Après cette étape, vous pouvez voir l'application fonctionner sur le simulateur ou un appareil connecté.

Regroupement de code d'application en mode Release - Pré-emballage du bundle JavaScript

En mode version, nous devons pré-emballer le bundle JavaScript et le distribuer dans notre application. Cela nécessite un changement de code afin qu'il sache charger le bundle statique. Dans le fichier AppDelegate.m, modifiez jsCodeLocation pour qu'il pointe vers le bundle statique si vous n'êtes pas en mode débogage.

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

Cela fera désormais référence au main.bundlefichier de ressources. Ce fichier est créé pendant la Bundle React Native code and imagesphase de construction dans Xcode. Pendant cette phase,react-native-xcode.shle script est exécutéqui regroupe le code de l'application JavaScript. Ce script se trouve dans le dossier scripts du module de nœud React-Native.

Construire l'application à partir de Xcode

Alternativement, le projet Xcode peut également être construit dans Xcode sur Mac au lieu d'utiliser la CLI React-Native. Une fois cela fait, l'application peut être lancée sur un simulateur sélectionné parmi les options Xcode ou sur un appareil physique connecté.

J'espère que cela vous a aidé à comprendre les différentes étapes qui se produisent lorsque nous exécutons une react-native run-ioscommande simple qui fait apparaître comme par magie une application sur iOS.

Certaines parties des informations fournies ici proviennent de la page d'accueil de React-Native. Le reste est le produit de moi qui fouille dans le code :)