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 MyReactNativeAprès avoir exécuté la commande ci-dessus, un dossier avec le nom spécifié est créé avec le contenu suivant.
É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
É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 startSi tout s'est bien passé, vous obtiendrez un code QR comme indiqué ci-dessous.
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 ejectCela vous invite à éjecter les options, sélectionnez la première à l'aide des flèches et appuyez sur Entrée.
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.
Bien que votre projet ait été éjecté avec succès, vous pouvez obtenir une erreur comme -
Ignorez cette erreur et exécutez react native pour Android à l'aide de la commande suivante -
react-native run-androidMais 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.
Après avoir téléchargé le fichier d'installation de celui-ci, double-cliquez dessus et procédez à l'installation.
Étape 8: Configuration d'AVD Manager
Pour configurer AVD Manager, cliquez sur l'icône correspondante dans la barre de menu.
Étape 9: Configuration d'AVD Manager
Choisissez une définition d'appareil, Nexus 5X est suggérable.
Cliquez sur le bouton Suivant, vous verrez une fenêtre Image système. Sélectionnez lex86 Images languette.
Ensuite, sélectionnez Marshmallow et cliquez sur suivant.
Enfin, cliquez sur le bouton Terminer pour terminer la configuration AVD.
Après avoir configuré votre appareil virtuel, cliquez sur le bouton de lecture sous la colonne Actions pour démarrer votre émulateur Android.
É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.
Ensuite, l'exécution de votre application commence dans une autre invite, vous pouvez voir son état.
Dans votre émulateur Android, vous pouvez voir l'exécution de l'application par défaut comme -
É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\\Sdkici, 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.
