React Native - Configuration de l'environnement
Vous devez installer plusieurs éléments pour configurer l'environnement de React Native. Nous utiliserons OSX comme plate-forme de construction.
N ° Sr. | Logiciel | La description |
---|---|---|
1 | NodeJS et NPM | Vous pouvez suivre notre tutoriel de configuration de l'environnement NodeJS pour installer NodeJS. |
Étape 1: Installez create-react-native-app
Après avoir installé NodeJS et NPM avec succès sur votre système, vous pouvez procéder à l'installation de create-react-native-app (globalement comme indiqué ci-dessous).
C:\Users\Tutorialspoint> npm install -g create-react-native-app
Étape 2: créer un projet
Parcourez le dossier requis et créez un nouveau projet natif react comme indiqué ci-dessous.
C:\Users\Tutorialspoint>cd Desktop
C:\Users\Tutorialspoint\Desktop>create-react-native-app MyReactNative
Après avoir exécuté la commande ci-dessus, un dossier avec le nom spécifié est créé avec le contenu suivant.
![](https://post.nghiatu.com/assets/tutorial/react_native/images/environment_project.jpg)
Étape 3: NodeJS Python Jdk8
Assurez-vous que Python NodeJS et jdk8 sont installés sur votre système, sinon, installez-les. En plus de cela, il est recommandé d'installer la dernière version de yarn pour éviter certains problèmes.
Étape 4: Installez React Native CLI
Vous pouvez installer l'interface de ligne de commande native react sur npm, à l'aide de la commande install -g react-native-cli comme indiqué ci-dessous.
npm install -g react-native-cli
![](https://post.nghiatu.com/assets/tutorial/react_native/images/environment_commandline.jpg)
Étape 5: Démarrez React Native
Pour vérifier l'installation, parcourez le dossier du projet et essayez de démarrer le projet à l'aide de la commande start.
C:\Users\Tutorialspoint\Desktop>cd MyReactNative
C:\Users\Tutorialspoint\Desktop\MyReactNative>npm start
Si tout s'est bien passé, vous obtiendrez un code QR comme indiqué ci-dessous.
![](https://post.nghiatu.com/assets/tutorial/react_native/images/environment_package_installer.jpg)
Comme indiqué, une façon d'exécuter des applications natives de réaction sur votre appareil Android consiste à utiliser expo. Installez le client expo dans votre appareil Android et scannez le code QR obtenu ci-dessus.
Étape 6: éjecter le projet
Si vous souhaitez exécuter l'émulateur Android à l'aide d'Android Studio, sortez de la ligne de commande actuelle en appuyant sur ctrl+c.
Ensuite, exécutez run eject command comme
npm run eject
Cela vous invite à éjecter les options, sélectionnez la première à l'aide des flèches et appuyez sur Entrée.
![](https://post.nghiatu.com/assets/tutorial/react_native/images/environment_eject_command.jpg)
Ensuite, vous devez suggérer le nom de l'application sur l'écran d'accueil et le nom du projet du studio Android et des projets Xcode.
![](https://post.nghiatu.com/assets/tutorial/react_native/images/environment_eject_command_questions.jpg)
Bien que votre projet ait été éjecté avec succès, vous pouvez obtenir une erreur comme -
![](https://post.nghiatu.com/assets/tutorial/react_native/images/environment_eject_error.jpg)
Ignorez cette erreur et exécutez react native pour Android à l'aide de la commande suivante -
react-native run-android
Mais avant cela, vous devez installer Android Studio.
Étape 7: Installation d'Android Studio
Visitez la page Web https://developer.android.com/studio/ et téléchargez le studio Android.
![](https://post.nghiatu.com/assets/tutorial/react_native/images/environment_android_studio.jpg)
Après avoir téléchargé le fichier d'installation de celui-ci, double-cliquez dessus et procédez à l'installation.
![](https://post.nghiatu.com/assets/tutorial/react_native/images/environment_android_studio3.jpg)
Étape 8: Configuration d'AVD Manager
Pour configurer AVD Manager, cliquez sur l'icône correspondante dans la barre de menu.
![](https://post.nghiatu.com/assets/tutorial/react_native/images/configuring_avd_manager.jpg)
Étape 9: Configuration d'AVD Manager
Choisissez une définition d'appareil, Nexus 5X est suggérable.
![](https://post.nghiatu.com/assets/tutorial/react_native/images/choose_device_definition.jpg)
Cliquez sur le bouton Suivant, vous verrez une fenêtre Image système. Sélectionnez lex86 Images languette.
![](https://post.nghiatu.com/assets/tutorial/react_native/images/system_image.jpg)
Ensuite, sélectionnez Marshmallow et cliquez sur suivant.
![](https://post.nghiatu.com/assets/tutorial/react_native/images/select_system_image.jpg)
Enfin, cliquez sur le bouton Terminer pour terminer la configuration AVD.
![](https://post.nghiatu.com/assets/tutorial/react_native/images/verify_configuration.jpg)
Après avoir configuré votre appareil virtuel, cliquez sur le bouton de lecture sous la colonne Actions pour démarrer votre émulateur Android.
![](https://post.nghiatu.com/assets/tutorial/react_native/images/your_virtual_devices.jpg)
Étape 10: Exécuter Android
Ouvrez l'invite de commande, parcourez le dossier de votre projet et exécutez le react-native run-android commander.
![](https://post.nghiatu.com/assets/tutorial/react_native/images/running_android.jpg)
Ensuite, l'exécution de votre application commence dans une autre invite, vous pouvez voir son état.
![](https://post.nghiatu.com/assets/tutorial/react_native/images/execution_status.jpg)
Dans votre émulateur Android, vous pouvez voir l'exécution de l'application par défaut comme -
![](https://post.nghiatu.com/assets/tutorial/react_native/images/react_native_default_app.jpg)
Étape 11: local.properties
Ouvrez le android dossier dans votre dossier de projet SampleReactNative/android(dans ce cas). Créer un fichier avec nommélocal.properties et ajoutez-y le chemin suivant.
sdk.dir = /C:\\Users\\Tutorialspoint\\AppData\\Local\\Android\\Sdk
ici, remplacez Tutorialspoint avec votre nom d'utilisateur.
Étape 12: rechargement à chaud
Et pour créer une application, modifiez App.js et les modifications seront automatiquement mises à jour sur l'émulateur Android.
Sinon, cliquez sur l'émulateur Android appuyez sur ctrl+m puis sélectionnez Enable Hot Reloading option.
![](https://post.nghiatu.com/assets/tutorial/react_native/images/environment_hot_reloading.jpg)