Ceci est une traduction de l'article original du blogueur sous le pseudonyme Soujanya PS. Elle est professionnelle dans son domaine et aime non seulement développer des applications et des services, mais aussi écrire des articles à ce sujet. Voici son examen du lancement d'une application iOS à l'aide du framework React Native.
Il n'y a pas si longtemps, j'ai commencé à utiliser React Native pour les applications iOS. Ceci est ma première plongée en profondeur dans un environnement de développement d'applications natif. Je note que j'ai été surpris de la facilité de l'ensemble du processus, ainsi que du niveau d'abstraction que l'interface de ligne de commande React Native fournit. En fait, c'est l'un des facteurs qui m'a poussé à écrire sur ce cadre. Je voudrais partager ma propre expérience avec ceux qui viennent de commencer à travailler avec lui.
Skillbox recommande: "Mobile Developer PRO . "
Nous vous rappelons: pour tous les lecteurs de «Habr» - une remise de 10 000 roubles lors de l'inscription à un cours Skillbox en utilisant le code promotionnel «Habr».
React Native fournit des outils de ligne de commande pour exécuter des applications iOS et Android sur des émulateurs et des appareils. Essayons de comprendre quoi et comment faire pour déployer une application React Native pour iOS.
Lancer réellement
React Native fournit un excellent utilitaire appelé init. Il fournit un modèle d'application, tout en créant des fichiers de projet Xcode pertinents dans le dossier iOS de cette application.
Celui-ci, à son tour, peut être lancé à la fois dans l'environnement de l'émulateur iOS et sur le téléphone / tablette en entrant la commande suivante dans le dossier racine de l'application:
réactif natif run-iosL'exécution réussie de la commande s'accompagne du lancement de l'application dans l'émulateur ou sur l'appareil. Nous vous disons ce qui doit être fait pour cela.
Commande Run-ios
React Native fournit au développeur plusieurs utilitaires de ligne de commande pour interagir avec l'application. Ils se trouvent dans le dossier local-cli des nœuds du module React Native. Run-ios est l'un des utilitaires qui exécute la fonction runIOS () définie dans le fichier runIOS.js.
Run-ios vous permet d'utiliser les options suivantes:
#Lancez l'application sur un simulateur spécifique
réactif natif run-ios - simulateur "iPhone 5"
#Passer un emplacement non standard du répertoire iOS
react-native run-ios --project-path "./app/ios"
#Exécuter sur un appareil connecté, par exemple l'iPhone de Max
react-native run-ios --device "Max's iPhone"
#Construire l'application en mode Release
react-native run-ios - Version de configurationSélection de périphérique / émulateur
Si le périphérique n'est pas spécifié, run-ios lancera le mode de débogage de l'application dans l'émulateur par défaut. Ceci est possible grâce à une série de commandes xcrun / simctl. Tout d'abord, vérifiez la liste des émulateurs disponibles, sélectionnez-en un et chargez l'application dans son environnement.
Si vous souhaitez exécuter l'application sur un appareil physique, connectez-le simplement à votre ordinateur portable et définissez les détails via run-ios.
L'étape suivante consiste à créer un projet d'application Xcode.
Code d'application
En règle générale, le projet d'application React Native Xcode se trouve dans le dossier iOS du répertoire racine. Un projet Xcode est créé à l'aide de la commande xcodebuild. Tous les paramètres précédemment définis pour run-ios sont passés à cette commande.
Une fois le projet créé, l'application est installée et lancée sur l'émulateur ou l'appareil connecté.
Ajout de code d'application en mode débogage
Tout au long du processus de développement, React Native charge dynamiquement votre code. Pour que tout se passe bien et que le code soit disponible au besoin, vous aurez besoin d'un serveur.
Pendant le débogage du projet Xcode, le serveur Metro démarre en parallèle avec lui. Il est utilisé par les applications créées à l'aide de l'interface de ligne de commande React Native. Tout cela vous permet d'accélérer et de simplifier le processus en utilisant le redémarrage "à chaud" et d'autres méthodes.
Par défaut, Metro écoute sur le port 8081. Dès que l'application est lancée dans l'émulateur, une requête est envoyée au serveur.
#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];
Le serveur charge toutes les dépendances nécessaires, collecte le code JavaScript et l'envoie à l'application. Après cette étape, vous pouvez voir l'application en cours d'exécution dans l'émulateur ou sur l'appareil connecté.
Package JavaScript
En mode release, vous devez d'abord compresser JavaScript, en le plaçant dans l'application. Pour ce faire, certaines modifications sont nécessaires pour permettre de télécharger un package statique. Vous devez modifier jsCodeLocation dans le fichier AppDelegate.m, indiquant l'emplacement du package statique en dehors du mode débogage:
#ifdef DEBUG jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@ fallbackResource:nil]; #else jsCodeLocation = [[NSBundle mainBundle] URLForResource:@ withExtension:@]; #endif
Il s'agit maintenant d'une indication du fichier de ressources main.bundle apparu lors du traitement du projet Xcode. A ce stade, le script react-native-xcode.sh est exécuté. Il se trouve dans le dossier de script du module React Native.
Création d'une application à partir de Xcode
Vous pouvez également créer un projet Xcode directement sur Mac au lieu d'utiliser la CLI React Native. Après avoir créé l'application, vous pouvez également l'exécuter sur l'émulateur sélectionné dans les options Xcode ou sur le périphérique physique.
J'espère que ce matériel vous a aidé à comprendre les processus qui démarrent lorsque la commande run-ios react-native est exécutée, ce qui crée de la magie et vous permet d'exécuter l'application dans l'environnement iOS.
Skillbox recommande: