Editions ENI Livres | Vidéos | e-Formations
Développer pour le mobile avec React Native
Présentation de React Native
À présent que nous avons vu les bases de React et comment concevoir une application grâce à Redux, vous disposez des connaissances nécessaires pour écrire des applications relativement complexes. Mais jusque-là, nous sommes restés dans le monde du Web, c’est-à-dire que les applications que nous avons écrites étaient exécutées dans un navigateur. Dans ce chapitre nous allons voir comment aller un peu plus loin en appliquant ce que nous avons vu pour créer des applications mobiles.
1. Un peu d’historique
Jusqu’à récemment, on pouvait dire que le développement pouvait être compartimenté en plusieurs types :
-
le développement d’applications « bureau » (desktop) ;
-
le développement d’applications web ;
-
le développement d’applications mobiles.
En tant que développeur, au moment de concevoir une application, la première question à se poser était de savoir quelle était la plateforme cible. Est-ce que je souhaite créer une application web accessible de n’importe quel navigateur, en faisant un compromis sur la réactivité de l’interface, notamment sur mobile ? Ou bien une application mobile, même si cela implique de développer une application par OS mobile : iOS, Android, Windows… ?
En supposant que l’on souhaitait développer pour le mobile, cette question était...
Une première application
1. Génération de l’application et premier lancement
Pour initialiser une application, le seul élément à installer est expo-cli, paquet NPM à installer de manière globale et contenant les outils en ligne de commande d’Expo :
$ npm i -g expo-cli Une fois le module installé, rendez-vous dans le répertoire où vous souhaitez créer votre application afin d’initialiser le projet :
$ expo init ma-premiere-app-mobile Au jour où ces lignes sont écrites (cela change fréquemment), il est demandé si vous souhaitez utiliser le template « Managed » ou « Bare », si vous souhaitez utiliser TypeScript ou non, et si l’installation doit utiliser Yarn ou NPM. Dans tous les cas, prenez le choix par défaut.
Depuis la sortie d’Expo 33 au printemps 2019, il est possible d’utiliser les fonctions d’Expo (notamment pour accéder à certaines fonctions natives de l’OS) même dans une application React Native ne reposant pas sur Expo. Expo distingue donc depuis les applications « managed », reposant sur Expo, des applications « bare » qui incluent Expo en tant que dépendance. Pour notre cas nous utiliserons le mode « managed ».
La commande crée le répertoire ma-premiere-app-mobile et l’initialise avec les fichiers nécessaires pour lancer une application minimaliste avec Expo. Les fichiers principaux sont les suivants :
-
package.json : il est initialisé avec les dépendances nécessaires et les commandes qui nous faciliteront le développement.
-
app.json : contient des métadonnées de l’application pour Expo, notamment la version d’Expo à utiliser. À terme, il contiendra aussi des données nécessaires pour générer le binaire de l’application.
-
App.js : le fichier principal de l’application.
Allons jeter un œil au fichier App.js afin de voir de quoi il retourne. Notez que depuis que j’ai écrit ce chapitre il se peut qu’Expo ait été mis à jour au point de changer légèrement le contenu des fichiers générés. Je n’ai cependant aucun mal à croire que les principes décrits ici resteront les mêmes....
Affichage de listes
À présent que nous avons su gérer la navigation au sein de notre application, passons à la deuxième notion à aborder : l’affichage de listes. Il est fréquent de vouloir afficher des listes dans une application, qu’il s’agisse d’une liste de contacts, d’articles ou de tâches. Tellement fréquent que React Native (et avant lui les plateformes iOS et Android) met à disposition le moyen de les gérer facilement, et surtout efficacement.
Efficacement dans le sens où pour l’affichage de listes comportant de nombreux éléments, il n’est pas nécessaire de générer le rendu pour tous les éléments, seuls ceux visibles importent. De plus, une fois que l’on fait défiler la liste vers le bas, les éléments du haut, devenus invisibles, peuvent probablement voir leur rendu libéré de la mémoire. Ce sont toutes ces optimisations que nous n’aurons pas à gérer nous-mêmes.
Pour créer une liste, deux composants s’offrent à nous :
-
FlatList permet d’afficher une liste simple ;
-
SectionList permet d’afficher une liste par section, comportant chacune un titre notamment.
Pour notre exemple, nous allons utiliser une FlatList. La première chose à faire est de définir un composant que l’on souhaite afficher pour chaque élément de la liste, en l’occurrence pour notre exemple, pour chaque contact. Appelons ce composant ContactListItem :
// src/components/ContactListItem.js
import...
