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.

É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 start

Si 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 eject

Cela 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-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.

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\\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.