Premiers pas avec React Native –

Avec la popularité croissante des smartphones, les développeurs recherchent des solutions pour la création d'applications mobiles. Les frameworks tels que Cordova et Ionic, React Native, NativeScript et Flutter permettent aux développeurs ayant une expérience Web de créer des applications mobiles avec des langages avec lesquels nous sommes familiers: HTML, XML, CSS et JavaScript.

guide, nous allons regarder de plus près à React Native. Vous apprendrez les bases absolues de la prise en main. Plus précisément, nous aborderons ce qui suit:

• qu'est-ce que React Native
• qu'est-ce que Expo
• comment créer un environnement de développement React Native
• comment créer une application avec React Native

? apprendre Réagir Autochtone à partir de zéro? Cet article est un extrait de notre bibliothèque Premium. Obtenez une collection complète de livres natifs de React couvrant les bases, les projets, les astuces, les outils, etc., avec SitePoint Premium. Inscrivez-vous maintenant pour seulement 9 dollars par mois .

Prérequis

Ce tutoriel suppose que vous venez d’un contexte de développement Web. Pour pouvoir suivre ce didacticiel en toute confiance, vous devez connaître HTML, CSS et JavaScript. Vous devez également savoir comment installer un logiciel sur votre système d'exploitation et utiliser la ligne de commande. Nous utiliserons également une syntaxe ES6, il serait donc utile de connaître également la syntaxe de base ES6. Connaître React est utile, mais pas obligatoire

Qu'est-ce que React Native?

React Native est un framework permettant de créer des applications fonctionnant à la fois sur Android et sur iOS. Il vous permet de créer de véritables applications natives à l'aide de JavaScript et de React. Cela diffère des frameworks tels que Cordova, dans lequel vous utilisez HTML pour créer l’UI, qui sera simplement affichée dans le navigateur mobile intégré du périphérique (WebView). React Native intègre des composants qui sont compilés en composants d'interface utilisateur natifs, tandis que votre code JavaScript est exécuté via une machine virtuelle. Cela rend React Native plus performant que Cordova.

Un autre avantage de React Native est sa capacité à accéder aux fonctions de périphérique natif. Il existe de nombreux plug-ins que vous pouvez utiliser pour accéder à des fonctionnalités de périphérique natif, tels que les caméras et de divers capteurs de périphérique . Si vous avez besoin d'une fonctionnalité spécifique à la plate-forme qui n'a pas encore été implémentée, vous pouvez également créer vos propres modules natifs – bien que cela nécessite une connaissance approfondie de la plate-forme native de votre choix. à prendre en charge (Java ou Kotlin pour Android et Objective C ou Swift pour iOS).

Si vous venez ici et que vous êtes nouveau dans React, vous vous demandez peut-être ce que c'est. React est une bibliothèque JavaScript pour le Web permettant de créer des interfaces utilisateur. Si vous connaissez MVC, il s’agit essentiellement de la vue dans MVC. Le principal objectif de React est de permettre aux développeurs de créer des composants d’UI réutilisables. Des exemples de ces composants incluent des boutons, des curseurs et des cartes. React Native a eu l'idée de construire des composants d'interface utilisateur réutilisables et de l'intégrer au développement d'applications mobiles.

Qu'est-ce que l'Expo?

Avant de venir ici, vous avez peut-être entendu parler de Expo . C'est même recommandé dans les documents officiels React Native, vous vous demandez peut-être ce qu'il en est vraiment.

En termes simples, Expo vous permet de créer des applications React Native sans le problème initial lié à la configuration de votre environnement de développement. Node ne doit être installé que sur votre ordinateur et l'application client Expo sur votre périphérique ou votre émulateur.

Mais c'est exactement comme cela que l'Expo est initialement vendu. En réalité, c’est beaucoup plus que cela. Expo est en réalité une plate-forme qui vous donne accès à des outils, des bibliothèques et des services pour créer plus rapidement des applications Android et iOS avec React Native. Expo est livré avec un SDK comprenant la plupart des API que vous pouvez demander sur une plate-forme de développement d'applications mobiles:

Ce ne sont là que quelques-unes des API auxquelles vous avez accès dès que vous commencez à créer des applications React Native avec Expo. Bien entendu, ces API sont également disponibles via des modules natifs si vous développez votre application à l'aide de la configuration standard de React Native.

Plain React Native ou Expo?

La vraie question est de savoir laquelle choisir – React Native ou Expo? Il n’ya vraiment pas de bonne ou de mauvaise réponse. Tout dépend du contexte et de vos besoins actuels. Mais je suppose qu’il est prudent de supposer que vous lisez ce didacticiel, car vous souhaitez vous familiariser rapidement avec React Native. Je vais donc vous recommander de commencer par Expo. C’est rapide, simple et facile à installer. Vous pouvez vous plonger directement dans le bricolage avec le code React Native et avoir une idée de ce qu'il a à offrir en seulement quelques heures.

Cela dit, j'ai quand même inclus les instructions de configuration détaillées de React Native standard pour ceux qui le souhaitent. de le faire de manière standard. Au fur et à mesure que vous commencez à comprendre les différents concepts et que le besoin de fonctionnalités natives différentes se fait sentir, vous constaterez que l’Expo est en quelque sorte contraignante. Oui, de nombreuses fonctionnalités natives sont disponibles, mais tous les modules natifs disponibles pour les projets React Native standard ne sont pas pris en charge.

Remarque: des projets tels que unimodules commencent à fermer écart entre les projets React Native standard et les projets Expo, car il permet aux développeurs de créer des modules natifs fonctionnant à la fois pour React Native et ExpoKit.

Configuration de l’environnement de développement natif de React

Dans cette section, nous allons configurer Environnement de développement natif de React pour les trois principales plates-formes: Windows, Linux et macOS. Nous verrons également comment configurer les simulateurs Android et iOS. Enfin, nous verrons comment mettre en place Expo. Si vous souhaitez simplement commencer rapidement, je vous recommande de faire défiler l'écran jusqu'à la section «Configuration de l'exposition».

Voici la procédure générale à suivre pour configurer l'environnement. Assurez-vous de faire correspondre ces étapes générales aux étapes de chaque plate-forme:

1. installer JDK
2. installer Android Studio ou Xcode
3. installer Watchman
4. mettre à jour la variable d'environnement
5. installer l'émulateur
6. installer le nœud
7. installez l'interface CLI de React Native

Vous pouvez passer directement à la section correspondant à votre système d'exploitation. Certaines étapes – comme la configuration d'Android Studio – sont fondamentalement les mêmes pour chaque système d'exploitation. Je les ai donc placées dans leur propre section:

• Configuration sous Windows
• Configuration sous Linux
• Configuration sous macOS
• Installation d'Android Studio
• Installation du nœud
• Installation de Expo
• Installation des émulateurs
• Installation de React Native CLI
• Résolution des problèmes courants

Installation sous Windows

vous montrer comment installer et configurer le logiciel nécessaire à la création d'applications React Native sur Windows. Windows 10 a été utilisé pour le tester.

Installer Chocolatey

Windows ne vient pas vraiment avec son propre gestionnaire de paquets que nous pouvons utiliser pour installer les outils nécessaires. La première chose à faire est donc d’installer un modèle appelé Chocolatey . Vous pouvez l'installer en exécutant la commande suivante sur la ligne de commande ou Windows Powershell:

 @ "% SystemRoot%  System32  WindowsPowerShell  v1.0  powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient) .DownloadString ('https://chocolatey.org/install.ps1')) "&& SET" CHEMIN =% CHEMIN%;% ALLUSERSPROFILE%  chocolatey  bin "

Nous pouvons maintenant installer les autres outils nécessaires simplement en utilisant Chocolatey.

Installer Python

Python est livré avec les outils de ligne de commande requis par React Native:

 choco install -y python 2

Installez JDK

Le JDK permet à votre ordinateur de comprendre et d'exécuter du code Java. Assurez-vous d’installer la version 8 du JDK car c’est celle requise par React Native:

 choco install jdk8

Installez NVM

Le noeud a un programme d'installation pour Windows . Il est préférable d’utiliser NVM pour Windows, car cela vous permettra d’installer plusieurs versions de Node afin de pouvoir tester de nouvelles versions ou d’utiliser une version différente en fonction du projet sur lequel vous travaillez actuellement. Pour cela, vous pouvez utiliser NVM pour Windows. Téléchargez nvm-setup.zip extrayez-le et exécutez-le nvm-setup.exe pour l'installer.

Installez Watchman

Watchman optimise le temps de compilation de votre application React Native. . C’est une installation facultative si vous ne travaillez pas sur un projet volumineux. Vous pouvez trouver les instructions d'installation sur leur site Web .

Mise à jour des variables d'environnement

Il s'agit de la dernière étape de la configuration de React Native sous Windows. C'est ici que nous mettons à jour les variables d'environnement afin que le système d'exploitation connaisse tous les outils requis par React Native. Suivez ces étapes juste avant d'installer l'interface de ligne de commande native React.

1. Aller à Panneau de configuration → Système et sécurité → Système . Une fois là-bas, cliquez sur le menu Paramètres système avancés à gauche.

   

2. Cela ouvrira la fenêtre des propriétés du système. Cliquez sur le bouton Variables d'environnement :

   

3. Dans la section Variables utilisateur mettez en surbrillance la variable de chemin et cliquez sur le bouton edit .

4. Dans l'écran d'édition, cliquez sur le bouton Nouveau et entrez le chemin d'accès au SDK Android et aux outils de la plate-forme. Pour moi, c'est sur C: utilisateurs monNom d'utilisateur AppData Local Android Sdk et C: utilisateurs monNom d'utilisateur AppData Local Android Sdk platform-tools . Notez que c'est également à cet endroit que vous ajoutez le chemin d'accès au JDK s'il n'est pas déjà ajouté:

   

Configuration sur Linux

Cette section explique comment installer et configurer le outils nécessaires au développement d'applications natives React sous Linux. J’ai spécifiquement utilisé Ubuntu 18.04 pour tester des choses, mais vous devriez être capable de traduire les commandes en distribution Linux que vous utilisez.

Installer les outils prérequis

La première étape consiste à installer les outils suivants. La première ligne installe les outils requis par Node et la deuxième ligne est requise par Watchman, que nous installerons plus tard:

 sudo apt-get install build-essential libssl-dev curl
sudo apt-get installez git autoconf automake python-dev

Installer la NVM

La NVM nous permet d'installer et d'utiliser plusieurs versions de Node. Vous pouvez l'installer avec les commandes suivantes:

 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | frapper
source ~ / .profile

Remarque: veillez à consulter la dernière version de la page des versions pour vous assurer que la version de NVM que vous installez est mise à jour.

Installez JDK

. React Native compile en réalité le code correspondant à chacune des plateformes sur lesquelles vous souhaitez déployer. Le JDK permet à votre ordinateur de comprendre et d'exécuter du code Java. La version spécifique de JDK requise par React Native est JDK version 8 .

 sudo apt-get install openjdk-8-jre

Installer Watchman

Watchman est un outil qui permet de surveiller les modifications apportées au système de fichiers. Il est principalement utilisé pour accélérer le processus de compilation. Si vous avez activé la prévisualisation en direct sur l’application que vous développez, les modifications apportées à l’application seront reflétées plus rapidement dans la prévisualisation en direct. Les étapes suivantes nécessitent que Git soit déjà installé sur votre système:

 git clone https://github.com/facebook/watchman.git
cd gardien
Git Checkout v4.9.0
./autogen.sh
./configurer
faire
sudo faire installer

Il est possible que vous rencontriez un problème qui ressemble à ceci:

  CXX scm / watchman-Mercurial.o
scm / Mercurial.cpp: dans le constructeur ‘watchman :: Mercurial :: infoCache :: infoCache (std :: __ cxx11 :: string) ':
scm / Mercurial.cpp: 16: 40: erreur: "void * memset (void *, int, size_t)" effaçant un objet de type non trivial "struct watchman :: FileInformation"; utilisez plutôt une affectation ou une initialisation de valeur [-Werror=class-memaccess]
   memset (& dirstate, 0, sizeof (dirstate));
                                        ^
Dans le fichier inclus à partir de scm / Mercurial.h: 10,
                 de scm / Mercurial.cpp
./FileInformation.h:18:8: remarque: ‘struct watchman :: FileInformation’ déclarée ici
 struct FileInformation {
        ^ ~~~~~~~~~~~~~~~
cc1plus: tous les avertissements sont traités comme des erreurs
make: *** [Makefile:4446: scm/watchman-Mercurial.o] Erreur 1

Essayez plutôt la commande suivante:

 ./ configure --without-python --without-pcre --enable-lenient

Mise à jour des variables d'environnement

La mise à jour des variables d'environnement est nécessaire pour que le système d'exploitation connaisse les outils que vous avez installés, afin que vous puissiez les utiliser directement à partir du terminal. Notez qu’il s’agit de la dernière étape de la configuration de tous les outils requis par React Native. Suivez ceci juste avant l'étape d'installation de la CLI Native React.

Pour mettre à jour les variables d'environnement, ouvrez votre fichier .bash_profile :

 sudo nano ~ / .bash_profile

Ajoutez les éléments suivants au début, puis enregistrez le fichier:

 export ANDROID_HOME = $ HOME / Android / Sdk
export PATH = $ PATH: $ ANDROID_HOME / émulateur
export PATH = $ PATH: $ ANDROID_HOME / tools
export PATH = $ PATH: $ ANDROID_HOME / tools / bin
export PATH = $ PATH: $ ANDROID_HOME / platform-tools

Notez que le chemin ci-dessus suppose que le SDK Android est installé sur le répertoire personnel de votre utilisateur:

 echo $ HOME

Configuration sur macOS

Avoir un Mac vous permet de développer des applications Android et iOS avec React Native. Dans cette section, je vais vous montrer comment configurer l'environnement de développement pour Android et iOS.

Installation des outils prérequis

MacOS étant déjà livré avec Ruby et cURL par défaut, le seul outil à installer est Homebrew un gestionnaire de paquet pour macOS:

 / usr / bin / ruby ​​-e "$ (curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Si vous l'avez déjà installé, mettez-le simplement à jour comme suit:

 brew update

Pour iOS, les éléments suivants sont requis:

• Dernière version de Xcode : installe les outils nécessaires à la compilation d'applications iOS
• Watchman : pour surveiller les modifications de fichiers
• ] NVM : pour installer le noeud

Installez JDK

Installez JDK version 8 pour macOS, comme requis par React Native:

 appuyez sur le robinet d'infusion AdoptOpenJDK / openjdk
installation du tonneau de bière adoptopenjdk8

Installer Watchman

Watchman accélère le processus de compilation de votre code source. L’installation est requise pour Android et iOS:

 brasser installer watchman

Installer la NVM

La NVM vous permet d'installer plusieurs versions de Node à des fins de test:

 brew install nvm
echo "source $ (brassage - préfixe nvm) /nvm.sh" >> .bash_profile

Mettre à jour les variables d’environnement

Après avoir installé tous les outils nécessaires et juste avant d’installer la CLI Native React, il est temps de mettre à jour les variables d’environnement. Il s'agit d'une étape importante, car sans cela, le système d'exploitation ne connaît pas les outils requis par React Native.

Pour la mettre à jour, ouvrez votre fichier .bash_profile :

 sudo nano ~ / .bash_profile

Ajoutez ensuite le chemin d'accès au SDK et aux outils de la plateforme Android:

 exportez ANDROID_HOME = / Utilisateurs / $ USER / Bibliothèque / Android / sdk
export PATH = $ {PATH}: $ ANDROID_HOME / tools: $ ANDROID_HOME / platform-tools: $ ANDROID_HOME / émulateur

Configuration d’Android Studio

Android Studio est le moyen le plus simple d’installer les outils nécessaires à Android (Android SDK, Android Emulator). C’est donc la méthode que je recommande habituellement aux débutants. Vous pouvez télécharger le programme d'installation pour votre plate-forme spécifique ici .

Sous Windows et macOS, un assistant de configuration que vous pouvez simplement exécuter est disponible en cliquant sur Suivant jusqu'à la fin de l'installation. . Assurez-vous de sélectionner le fichier .dmg pour macOS ou le fichier .exe pour Windows à partir de ici si le bouton de téléchargement par défaut télécharge quelque chose de différent. Vous pouvez utiliser les captures d’écran suivantes comme base de votre installation:

Si vous êtes sous Linux, vous devez d’abord suivre ces étapes avant de pouvoir installer Android Studio:

1. Téléchargez et extrayez le fichier .tar.gz :

    .tar -xzvf android-studio-ide-183.5522156-linux.tar.gz
    

2. Accédez au répertoire extrait et entrez dans le répertoire bin .

3. Exécutez studio.sh . Cela ouvre le programme d'installation pour Android Studio:

    ./ studio.sh
    

L'assistant de configuration vous salue d'abord avec l'écran suivant:

Cliquez simplement sur Suivant jusqu'à ce que l'écran ci-dessous apparaisse. Le SDK Android et la dernière version de l'API Android sont vérifiés par défaut. Vous pouvez également consulter le périphérique virtuel Android si vous le souhaitez. Cela installe l'émulateur Android par défaut pour tester vos applications. Mais je recommande généralement d'utiliser Genymotion à la place, car il contient de meilleurs outils pour tester différentes fonctionnalités de l'appareil:

Une fois que tout est installé, il montrer ce qui suit. Cliquez simplement sur Terminer pour fermer l’Assistant d’installation:

L’étape suivante consiste à ouvrir Android Studio pour configurer la plate-forme et les outils SDK: [19659012]

Remarque: si vous avez déjà installé Android Studio, un projet existant est peut-être déjà ouvert. Dans ce cas, vous pouvez lancer le gestionnaire de SDK à partir du menu supérieur Outils → Gestionnaire de SDK . Puis vérifiez dans le Afficher les détails du paquet en bas à droite. Ainsi, vous pouvez choisir uniquement les sous-composants au lieu d'installer le tout.

Sous l'onglet SDK Platforms assurez-vous que les options suivantes sont vérifiées:

• Android 9.0 ( Tarte)
  • Plate-forme SDK Android 28
  • API de Google Image système Intel x86 Atom_64 ou Image système Intel x86 Atom_64

Dans l'onglet SDK Tools cochez la case Outils Afficher les détails du paquet à nouveau et assurez-vous que les éléments suivants sont cochés:

• Android SDK Build-Tools 29
• Outils de plate-forme SDK Android
• Outils de SDK Android
• Référentiel de support Android
• Référentiel Google

Si vous avez décidé d'installer l'émulateur Android, procédez comme suit:

• Accélérateur d'émulateur Intel x86 (Programme d'installation HAXM) )

Cela optimisera les performances de l'émulateur.

Nœud d'installation

Exécutez les commandes suivantes pour installer une version spécifique de Node et la définir comme valeur par défaut:

 nvm install 11.2.0
nvm alias default 11.2.0

Une fois installé, vous pouvez vérifier son fonctionnement en exécutant les opérations suivantes:

 node --version
npm --version

Voici à quoi ressemblera le résultat:

Configuration de l’Expo

Dans cette section, nous allons configurer Expo, un autre moyen de développer des applications React Native. Cette section suppose que Node et Watchman sont déjà installés.

Pour configurer Expo, il vous suffit d'installer son outil de ligne de commande via npm:

 npm install -g expo-cli

C’est vraiment tout ce qu’il ya à faire! La prochaine étape consiste à télécharger l'application client de l'Expo pour Android ou iOS . Notez que c’est le seul moyen d’exécuter des applications Expo pendant que vous êtes encore en développement. Plus tard, vous pouvez créer la version autonome .

À partir de là, vous pouvez passer à la section Hello World App si vous prévoyez de lancer des applications sur votre appareil, ou le Configuration des émulateurs si vous souhaitez l'exécuter sur l'émulateur Android ou sur le simulateur iOS

Configuration des émulateurs

Les émulateurs vous permettent de tester les applications que vous développez directement à partir de votre ordinateur de développement.

Remarque: les émulateurs nécessitent que votre ordinateur dispose d'au moins 4 Go de RAM. Sinon, ils ralentiront vraiment votre machine au point de ne rien obtenir en raison d'attendre que des choses soient compilées ou chargées.

Simulateur iOS

Xcode est déjà préinstallé avec des simulateurs iOS, de sorte que tout ce que vous avez à faire est de le lancer avant de lancer vos applications. Pour lancer un simulateur iOS à partir de la ligne de commande, vous devez d'abord répertorier les simulateurs disponibles:

 xcrun simctl list

Prenez note de l'unité UUID de l'appareil que vous souhaitez exécuter et remplacez-la par la valeur de UUID de la commande ci-dessous:

 open -a Simulator --args -CurrentDeviceUDID "UUID"

Genymotion

Comme mentionné précédemment, je recommande Genymotion comme émulateur pour Android, car il comporte davantage de fonctionnalités que vous pouvez tester, par exemple lorsque vous testez des applications utilisant le GPS. Genymotion vous permet de sélectionner un emplacement spécifique via une interface cartographique:

Pour installer Genymotion, vous devez d'abord télécharger et installer VirtualBox . Une fois cela fait, créez un compte Genymotion connectez-vous et téléchargez le programme d’installation . Windows et macOS sont livrés avec un programme d'installation correspondant. Mais pour Linux, vous devez télécharger le programme d’installation et le rendre exécutable:

 chmod + x genymotion-  _  .bin

Après cela, vous pouvez maintenant exécuter le programme d'installation:

 ./ genymotion-  _  .bin

Une fois l’installation terminée, vous devriez pouvoir la rechercher sur votre lanceur.

Android Emulator

Même si Genymotion est la première chose que je recommande, je pense qu’Android Emulator présente également des avantages. Par exemple, le démarrage est plus rapide et la sensation est plus rapide en général. Je le recommande si votre machine a des spécifications inférieures ou si vous n'avez pas besoin des fonctionnalités supplémentaires de Genymotion.

Lorsque vous lancez Android Studio, vous pouvez sélectionner AVD Manager à partir des options de configuration (ou Outils → AVD Manager si vous avez actuellement un projet ouvert.

Cliquez sur le bouton Créer un périphérique virtuel dans la fenêtre qui s'affiche. Il vous demandera ensuite de choisir le périphérique que vous souhaitez installer:

Vous pouvez choisir le périphérique de votre choix, mais idéalement, vous souhaitez que ceux qui possèdent déjà un Play Store inclus. Il sera particulièrement utile que votre application s'intègre à Google Sign in ou à d'autres applications, car elle vous permettra d'installer ces applications facilement.

Ensuite, il vous sera demandé de télécharger la version d'Android que vous souhaitez installer sur le logiciel. dispositif. Sélectionnez simplement la dernière version d’Android prise en charge par React Native. Au moment de la rédaction de ce tutoriel, c’est Android Pie. Notez que c’est également la même version que celle que nous avions précédemment installée pour la plate-forme Android SDK:

Une fois installé, cliquez sur Terminer pour fermer la fenêtre actuelle puis cliquez sur OK. sur Suivant une fois que vous voyez cet écran:

Cliquez sur Terminez sur l'écran suivant pour créer l'émulateur. Il sera ensuite répertorié sur le gestionnaire de périphériques virtuels Android. Cliquez sur le bouton de lecture à côté de l'émulateur pour le lancer.

Installation de l'interface de ligne de commande native React

La dernière étape consiste à installer l'interface de ligne de commande native React. C'est l'outil de ligne de commande qui vous permet d'amorcer un nouveau projet React Native, de lier des dépendances natives et d'exécuter l'application sur un périphérique ou un émulateur:

 npm install -g react-native-cli

Une fois installé, vous pouvez essayer de créer un nouveau projet et l’exécuter sur votre périphérique ou émulateur:

 react-native init HelloWorldApp
cd HelloWorldApp
réagit natif run-android
réactif natif run-ios

Voici à quoi ressemblera par défaut l'application:

À ce stade, vous disposez désormais d'un environnement de développement React Native entièrement fonctionnel.

Dépannage Erreurs courantes

Dans cette section, nous allons examiner les erreurs les plus courantes que vous pouvez rencontrer lors de la configuration de votre environnement.

Impossible de trouver tools.jar

Vous pouvez obtenir l'erreur suivante: [19659047] Impossible de trouver tools.jar. Vérifiez que / usr / lib / jvm / java-8-openjdk-amd64 contient une installation JDK valide.

Cela signifie que le système ne reconnaît pas votre installation JDK. La solution consiste à le réinstaller:

 sudo apt-get install openjdk-8-jdk

Emplacement du SDK introuvable

Vous pouvez obtenir l'erreur suivante lorsque vous exécutez votre application:

 FAILURE: la génération a échoué avec une exception.

* Qu'est ce qui ne s'est pas bien passé:
Un problème est survenu lors de la configuration du projet ': app'.
> Emplacement du SDK introuvable. Définissez l'emplacement avec sdk.dir dans le fichier local.properties ou avec une variable d'environnement ANDROID_HOME.

Cela signifie que vous n'avez pas correctement ajouté le chemin d'accès à tous les outils Android requis par React Native. Vous pouvez le vérifier en exécutant ce qui suit:

 echo $ PATH

Il devrait montrer le chemin suivant:

 Android / sdk / tools
Android / sdk / tools / bin
Android / sdk / plateforme-outils

Si ce n'est pas le cas, vous devez modifier votre fichier .bashrc ou .bash_profile pour ajouter le chemin manquant. La configuration ci-dessous ajoute le chemin aux outils de la plateforme:

 sudo nano ~ / .bash_profile
export PATH = $ PATH: $ ANDROID_HOME / tools: $ ANDROID_HOME / platform-tools

Impossible de trouver des «instruments» utilitaires

Si vous développez pour iOS, vous risquez de rencontrer l’erreur suivante lorsque vous essayez d’exécuter l’application:

 Le projet Xcode trouvé, TestProject.xcodeproj
xcrun: erreur: impossible de trouver l'utilitaire "instruments", pas un développeur
outil ou dans PATH

Le problème est que les outils de ligne de commande Xcode ne sont pas encore installés. Vous pouvez les installer avec la commande suivante:

 xcode-select --install

Application “Hello World”

Maintenant que votre environnement de développement est configuré, vous pouvez commencer à créer l'application “hello world” obligatoire. L’application que vous allez créer est une application de recherche Pokemon. Cela permettra à l'utilisateur de taper le nom d'un Pokemon et d'afficher ses détails.

Voici à quoi ressemblera le résultat final:

Vous pouvez trouver le code source. sur ce GitHub repo .

Bootstrapping the App

Sur votre terminal, exécutez la commande suivante pour créer un nouveau projet React Native:

 init-RN -oke RNPokeSearch

Pour ceux d’entre vous qui ont décidé d’utiliser Expo à la place, voici la commande équivalente pour amorcer un nouveau projet React Native sur Expo. Sous Flux de travail géré sélectionnez vierge entrez «RNPokeSearch» pour le nom du projet et installez des dépendances à l'aide de Yarn:

 expo init RNPokeSearch.

Comme dans l'environnement Web, vous pouvez installer des bibliothèques pour implémenter facilement différents types de fonctionnalités dans React Native. Une fois le projet créé, nous devons installer deux dépendances: pokemon et axios . Le premier est utilisé pour vérifier si le texte saisi dans la zone de recherche est un vrai nom Pokemon, tandis qu'axios sert à envoyer une requête HTTP à l'API utilisée: PokeAPI :

 fil. ajouter pokemon axios

Notez que la commande ci-dessus fonctionne à la fois sur les projets natifs React standard et sur le flux de travail géré par Expo, car ils ne possèdent aucune dépendance native. Si vous utilisez le flux de travail géré d'Expo, vous ne pourrez pas utiliser de paquetages ayant des dépendances natives.

Structure de répertoire de projet natif de React

Avant de procéder à la programmation, examinons d'abord la structure de répertoire de un projet standard de React Native:

Voici une ventilation des fichiers et des dossiers les plus importants dont vous devez vous souvenir:

• App.js : le fichier de projet principal. C’est là que vous allez commencer à développer votre application. Toute modification apportée à ce fichier sera reflétée à l'écran.
• index.js : fichier de point d'entrée de tout projet React Native. Il est responsable de l'enregistrement du fichier App.js en tant que composant principal.
• package.json : le nom et les versions des bibliothèques installées pour ce projet sont ajoutés.
• node_modules : où sont stockées les bibliothèques que vous avez installées. Notez que cela contient déjà beaucoup de dossiers avant d’installer les deux bibliothèques auparavant. En effet, React Native possède également ses propres dépendances. Il en va de même pour toutes les autres bibliothèques que vous installez.
• src : agit comme le dossier principal qui stocke tout le code source lié à l'application elle-même. Notez qu'il ne s'agit que d'une convention. Le nom de ce dossier peut être n'importe quoi. Certaines personnes utilisent également l'application .
• android : où se trouve le code lié à Android. React Native n’est pas une langue maternelle. C’est pourquoi nous avons besoin de ce dossier pour amorcer l’application Android.
• ios : où se trouve le code lié à iOS. Ceci accomplit la même chose que le dossier android mais pour iOS.

Ne vous occupez pas du reste des dossiers et des fichiers pour l'instant, car nous n'en aurons pas besoin dès le début.

Votre répertoire de projet ressemblera à ceci pour les utilisateurs de l'Expo:

Comme vous pouvez le constater, c'est à peu près la même chose. La seule différence est qu’il n’ya pas de dossiers android et ios . En effet, Expo gère l’exécution de l’application pour vous sur les deux plates-formes. L’ajout du dossier assets a également été ajouté. C'est là que sont stockés les actifs de l'application, tels que les icônes et les écrans de démarrage.

Exécution de l'application

À ce stade, vous pouvez maintenant exécuter l'application. Be sure to connect your device to your computer, or open your Android emulator or iOS simulator before doing so:

react-native run-android
react-native run-ios

You already saw what the default screen looks like earlier.

If you’re on Expo, you can run the project with the following command. Be sure you’ve already installed the corresponding Expo client for your phone’s operating system before doing so:

yarn start

Once it’s running, it will display the QR code:

Open your Expo client app, and in the projects tab click on Scan QR Code. This will open the app on your Android or iOS device. If you have an emulator running, you can either press i to run it on the iOS simulator or a to run it on the Android emulator:

If you’re testing on a real device, shake it so the developer menu will show up:

Click on the following:

• Enable Live Reload: automatically reloads your app when you hit save on any of its source code.
• Start Remote JS Debugging: for debugging JavaScript errors on the browser. You can also use react-native log-android or react-native log-ios for this, but remote debugging has a nicer output, so it’s easier to inspect.

If you want, you can also set the debug server. This allows you to disconnect your mobile device from your computer while you develop the app. You can do that by selecting Dev Settings in the developer menu. Then under the Debugging section, select Debug server host & port for device. This opens up a prompt where you can enter your computer’s internal IP address and the port where Metro Bundler runs on (usually port 8081).

Once you’ve set that, select Reload from the developer menu to commit the changes. At this point, you can now disconnect your device from the computer. Note that any time you install a package, you have to connect your device, quit Metro Bundler, and run the app again (using react-native run-android or react-native run-ios). That’s the only way for the changes to take effect.

Coding the App

Both standard React Native projects and Expo have built-in components which you can use to accomplish what you want. Simply dig through the documentation and you’ll find information on how to implement what you need. In most cases, you either need a specific UI component or an SDK which works with a service you plan on using. You can use Native Directory to look for those or just plain old Google. More often than not, here’s what your workflow is going to look like:

1. Look for an existing package which implements what you want.
2. Install it.
3. Link it — only for native modules. If you’re on Expo, you don’t really need to do this because you can only install pure JavaScript libraries — although this might change soon because of the introduction of unimodules and bare workflow.
4. Use it on your project.

Now that you’ve set up your environment and learned a bit about the workflow, we’re ready to start coding the app.

Start by replacing the contents of the App.js file with the following code:

import React from 'react';
import Main from './src/Main';

function App() {

  return 


}

export default App;

The first line in the code above code imports React. You need to import this class any time you want create a component.

The second line is where we import a custom component called Main. We’ll create it later. For now, know that this is where we’ll put the majority of our code.

After that, we create the component by creating a new function. All this function does is return the Main component.

Lastly, we export the class so that it can be imported somewhere else. In this case, it’s actually imported from the index.js file.

Next, create the src/Main.js file and add the following:

// src/Main.js
import React, { Component } from 'react';
import { SafeAreaView, View, Text, TextInput, Button, Alert, StyleSheet, ActivityIndicator } from 'react-native';

The second line imports the components that are built into React Native. Here’s what each one does:

• SafeAreaView: for rendering content within the safe area boundaries of a device. This automatically adds a padding that wraps its content so that it won’t be rendered on camera notches and sensor housing area of a device.
• View: a fundamental UI building block. This is mainly used as a wrapper for all the other components so they’re structured in such a way that you can style them with ease. Think of it as the equivalent of
  : if you want to use Flexbox, you have to use this component.
• Text: for displaying text.
• TextInput: the UI component for inputting text. This text can be plain text, email, password, or a number pad.
• Button: for showing a platform-specific button. This component looks different based on the platform it runs on. If it’s Android, it uses Material Design. If it’s iOS, it uses Cupertino.
• Alert: for showing alerts and prompts.
• ActivityIndicator: for showing a loading animation indicator.
• StyleSheet: for defining the component styles.

Next, import the libraries we installed earlier:

import axios from 'axios';
import pokemon from 'pokemon';

We’ll also be creating a custom Pokemon component later. This one is used for displaying Pokemon data:

import Pokemon from './components/Pokemon';

Because getting the required Pokemon data involves making two API requests, we have to set the API’s base URL as a constant:

const POKE_API_BASE_URL =  "https://pokeapi.co/api/v2";

Next, define the component class and initialize its state:

export default class Main extends Component {

  state = {
    isLoading: false, // decides whether to show the activity indicator or not
    searchInput: '', // the currently input text
    name: '', // Pokemon name
    pic: '', // Pokemon image URL
    types: []// Pokemon types array
    desc: '' // Pokemon description
  }

  // next: add render() method
}

In the code above, we’re defining the main component of the app. You can do this by defining an ES6 class and having it extend React’s Component class. This is another way of defining a component in React. In the App.js file, we created a functional component. This time we’re creating a class-based component.

The main difference between the two is that functional components are used for presentation purposes only. Functional components have no need to keep their own state because all the data they require is just passed to them via props. On the other hand, class-based components maintain their own state and they’re usually the ones passing data to functional components.

If you want to learn more about the difference between functional and class-based components, read this tutorial: Functional vs Class-Components in React.

Going back to the code, we’re initializing the state inside our component. You define it as a plain JavaScript object. Any data that goes into the state should be responsible for changing what’s rendered by the component. In this case, we put in isLoading to control the visibility of the activity indicator and searchInput to keep track of the input value in the search box.

This is an important concept to remember. React Native’s built-in components, and even the custom components you create, accept properties that control the following:

• what’s displayed on the screen (data source)
• how they present it (structure)
• what it looks like (styles)
• what actions to perform when user interacts with it (functions)

We’ll go through those properties in more detail in the next section. For now, know that the value of those properties are usually updated through the state.

The rest of the state values are for the Pokemon data. It’s a good practice to set the initial value with the same type of data you’re expecting to store later on — as this serves as documentation as well.

Anything that’s not used for rendering or data flow can be defined as an instance variable, like so:

class Main extends Component {

    this.appTitle = "RNPokeSearch";

}

Alternatively, it can be defined as an outside-the-class variable, just like what we did with the POKE_API_BASE_URL earlier:

const POKE_API_BASE_URL = '';

class Main extends Component {

}

Structuring and Styling Components

Let’s return to the component class definition. When you extend React’s Component class, you have to define a render() method. This contains the code for returning the component’s UI and it’s made up of the React Native components we imported earlier.

Each component has its own set of props. These are basically attributes that you pass to the component to control a specific aspect of it. In the code below, most of them have the style prop, which is used to modify the styles of a component. You can pass any data type as a prop. For example, the onChangeText prop of the TextInput is a function, while the types prop in the Pokemon is an array of objects. Later on in the Pokemon component, you’ll see how the props will be used:

render() {
  const { name, pic, types, desc, searchInput, isLoading } = this.state; // extract the Pokemon data from the state
  revenir (
    
      
        
          
             this.setState({searchInput})}
              value={this.state.searchInput}
              placeholder={"Search Pokemon"}
            />
          
          
            
          
        

        
          {
            isLoading &&
            
          }

          {
            !isLoading &&
            
          }
        
      
    
  );
}

Breaking down the code above, we first extract the state data:

const { name, pic, types, desc, searchInput, isLoading } = this.state;

Next, we return the component’s UI, which follows this structure:

SafeAreaView.wrapper
  View.container
    View.headContainer
      View.textInputContainer
        TextInput
      View.buttonContainer
        Bouton
    View.mainContainer
      ActivityIndicator
      Pokemon

The above structure is optimized for using Flexbox. Go ahead and define the component styles at the bottom of the file:

const styles = StyleSheet.create({
  wrapper: {
    flex: 1
  },
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#F5FCFF',
  },
  headContainer: {
    flex: 1,
    flexDirection: 'row',
    marginTop: 100
  },
  textInputContainer: {
    flex: 2
  },
  buttonContainer: {
    flex: 1
  },
  mainContainer: {
    flex: 9
  },
  textInput: {
    height: 35,
    marginBottom: 10,
    borderColor: "#ccc",
    borderWidth: 1,
    backgroundColor: "#eaeaea",
    padding: 5
  }
});

In React Native, you define styles by using StyleSheet.create() and passing in the object that contains your styles. These style definitions are basically JavaScript objects, and they follow the same structure as your usual CSS styles:

element: {
  property: value
}

The wrapper and container is set to flex: 1which means it will occupy the entirety of the available space because they have no siblings. React Native defaults to flexDirection: 'column'which means it will lay out the flex items vertically, like so:

In contrast, (flexDirection: 'row') lays out items horizontally:

It’s different for headContainerbecause even though it’s set to flex: 1it has mainContainer as its sibling. This means that headContainer and mainContainer will both share the same space. mainContainer is set to flex: 9 so it will occupy the majority of the available space (around 90%), while headContainer will only occupy about 10%.

Let’s move on to the contents of headContainer. It has textInputContainer and buttonContainer as its children. It’s set to flexDirection: 'row'so that its children will be laid out horizontally. The same principle applies when it comes to space sharing: textInputContainer occupies thw thirds of the available horizontal space, while buttonContainer only occupies one third.

The rest of the styles are pretty self explanatory when you have a CSS background. Just remember to omit - and set the following character to uppercase. For example, if you want to set background-colorthe React Native equivalent is backgroundColor.

Note: not all CSS properties that are available on the Web are supported on React Native. For example, things like floats or table properties aren’t supported. You can find the list of supported CSS properties in the docs for View and Text components. Someone has also compiled a React Native Styling Cheat Sheet. There’s also a style section in the documentation for a specific React Native component that you want to use. For example, here are the style properties that you can use for the Image component.

Event Handling and Updating the State

Let’s now break down the code for the TextInput and Button components. In this section, we’ll talk about event handling, making HTTP requests, and updating the state in React Native.

Let’s start by examining the code for TextInput:

 this.setState({searchInput})}
  value={searchInput}
  placeholder={"Search Pokemon"}
/>

In the above code, we’re setting the function to execute when the user inputs something in the component. Handling events like these are similar to how it’s handled in the DOM: you simply pass the event name as a prop and set its value to the function you wish to execute. In this case, we’re simply inlining it because we’re just updating the state. The value input by the user is automatically passed as an argument to the function you supply so all you have to do is update the state with that value. Don’t forget to set the value of the TextInput to that of the state variable. Otherwise, the value input by the user won’t show as they type on it.

Next, we move on to the Button component. Here, we’re listening for the onPress event:

Once pressed, the searchPokemon() function is executed. Add this function right below the render() method. This function uses the async/await pattern because performing an HTTP request is an asynchronous operation. You can also use Promises, but to keep our code concise, we’ll stick with async/await instead. If you’re not familiar with it, be sure to read this tutorial:

render() {
  // ...
}

searchPokemon = async () => {
  try {
    const pokemonID = pokemon.getId(this.state.searchInput); // check if the entered Pokemon name is valid

    this.setState({
      isLoading: true // show the loader while request is being performed
    });

    const { data: pokemonData } = await axios.get(`${POKE_API_BASE_URL}/pokemon/${pokemonID}`);
    const { data: pokemonSpecieData } = await axios.get(`${POKE_API_BASE_URL}/pokemon-species/${pokemonID}`);

    const { name, sprites, types } = pokemonData;
    const { flavor_text_entries } = pokemonSpecieData;

    this.setState({
      name,
      pic: sprites.front_default,
      types: this.getTypes(types),
      desc: this.getDescription(flavor_text_entries),
      isLoading: false // hide loader
    });

  } catch (err) {
    Alert.alert("Error", "Pokemon not found");
  }
}

Breaking down the code above, we first check if the entered Pokemon name is valid. If it’s valid, the National Pokedex ID (if you open the link, that’s the number on top of the Pokemon name) is returned and we supply it as a parameter for the HTTP request. The request is made using axios’ get() method, which corresponds to an HTTP GET request. Once the data is available, we extract what we need and update the state.

Here’s the getTypes() function. All it does is reassign the slot and type properties of the Pokemon types to id and name:

getTypes = (types) => {
  return types.map(({ slot, type }) => {
    return {
      "id": slot,
      "name": type.name
    }
  });
}

Here’s the getDescription() function. This finds the first English version of the flavor_text:

getDescription = (entries) => {
  return entries.find(item => item.language.name === 'en').flavor_text;
}

Pokemon Component

Earlier, we imported and used a component called Pokemonbut we haven’t really created it yet. Let’s go ahead and do so. Create a src/components/Pokemon.js file and add the following:

// src/components/Pokemon.js
import React from 'react';
import { View, Text, Image, FlatList, StyleSheet } from 'react-native';

const Pokemon = ({ name, pic, types, desc }) => {
  if (!name) {
    return null
  }

  revenir (
    
      
        {name}

         item.id.toString()}
          renderItem={({item}) => {
            revenir (
              
                {item.name}
              
            )
          }}
        />

        
          {desc}
        
    
  );
}

//
const styles = StyleSheet.create({
  mainDetails: {
    padding: 30,
    alignItems: 'center'
  },
  image: {
    width: 100,
    height: 100
  },
  mainText: {
    fontSize: 25,
    fontWeight: 'bold',
    textAlign: 'center'
  },
  description: {
    marginTop: 20
  },
  types: {
    flexDirection: 'row',
    marginTop: 20
  },
  type: {
    padding: 5,
    width: 100,
    alignItems: 'center'
  },
  typeText: {
    color: '#fff',
  },
  normal: {
    backgroundColor: '#8a8a59'
  },
  fire: {
    backgroundColor: '#f08030'
  },
  water: {
    backgroundColor: '#6890f0'
  },
  electric: {
    backgroundColor: '#f8d030'
  },
  grass: {
    backgroundColor: '#78c850'
  },
  ice: {
    backgroundColor: '#98d8d8'
  },
  fighting: {
    backgroundColor: '#c03028'
  },
  poison: {
    backgroundColor: '#a040a0'
  },
  ground: {
    backgroundColor: '#e0c068'
  },
  flying: {
    backgroundColor: '#a890f0'
  },
  psychic: {
    backgroundColor: '#f85888'
  },
  bug: {
    backgroundColor: '#a8b820'
  },
  rock: {
    backgroundColor: '#b8a038'
  },
  ghost: {
    backgroundColor: '#705898'
  },
  dragon: {
    backgroundColor: '#7038f8'
  },
  dark: {
    backgroundColor: '#705848'
  },
  steel: {
    backgroundColor: '#b8b8d0'
  },
  fairy: {
    backgroundColor: '#e898e8'
  }
});

export default Pokemon;

In the code above, we first checked if the name has a falsy value. If it has, we simply return null as there’s nothing to render.

We’re also using two new, built-in React Native components:

• Image: used for displaying images from the Internet or from the file system
• FlatList: used for displaying lists

As we saw earlier, we’re passing in the Pokemon data as prop for this component. We can extract those props the same way we extract individual properties from an object:

const Pokemon = ({ name, pic, types, desc }) => {
  // ..  
}

The Image component requires the source to be passed to it. The source can either be an image from the file system, or, in this case, an image from the Internet. The former requires the image to be included using require()while the latter requires the image URL to be used as the value of the uri property of the object you pass to it.

resizeMode allows you to control how the image will be resized based on its container. We used containwhich means it will resize the image so that it fits within its container while still maintaining its aspect ratio. Note that the container is the Image component itself. We’ve set its width and height to 100so the image will be resized to those dimensions. If the original image has a wider width than its height, a width of 100 will be used, while the height will adjust accordingly to maintain the aspect ratio. If the original image dimension is smaller, it will simply maintain its original size:

Next is the FlatList component. It’s used for rendering a list of items. In this case, we’re using it to render the types of the Pokemon. This requires the datawhich is an array containing the items you want to render, and the renderItemwhich is the function responsible for rendering each item on the list. The item in the current iteration can be accessed the same way props are accessed in a functional component:

 item.id.toString()}
  renderItem={({item}) => {
    revenir (
      
        {item.name}
      
    )
  }}
/>

In the code above, we also supplied the following props:

• columnWrapperStyle: used for specifying the styles for each column. In this case, we want to render each list item inline, so we’ve specified flexDirection: 'row'.
• numColumns: the maximum number of columns you want to render for each row on the list. In this case, we’ve specified 2because a Pokemon can only have two types at most.
• keyExtractor: the function to use for extracting the keys for each item. You can actually omit this one if you pass a key prop to the outer-most component of each of the list items.

At this point, you can now test the app on your device or emulator:

react-native run-android
react-native run-ios
yarn start

Conclusion and Next Steps

That’s it! In this tutorial, you’ve learned how to set up the React Native development environment using both the standard procedure and Expo. You also learned how to create your very first React Native app.

To learn more, check out these resources:

You can find the source code used in this tutorial on this GitHub repo.

Wern is a web developer from the Philippines. He loves building things for the web and sharing the things he has learned by writing in his blog. When he's not coding or learning something new, he enjoys watching anime and playing video games.