Comment naviguer entre les écrans dans une application React Native

Souvent, lorsque vous construisez une app React Native, vous la composerez à partir de différents écrans comme Login, Home et About. Vous devrez alors mettre en œuvre un mécanisme de navigation pour que vos utilisateurs puissent naviguer dans l’app et accéder à ses différents écrans dans le bon ordre.

L’objectif de ce tutoriel est de vous guider à travers le processus de mise en place d’un système de navigation dans votre application React Native. Cela comprend l’installation de la bibliothèque, l’ajout de vos écrans au navigateur de pile et la connexion des écrans entre eux à partir de chacun de vos composants.

Avant de commencer

Pour suivre ce tutoriel sur votre ordinateur local, vous devez avoir installé les éléments suivants :

• Node.js v10 ou supérieur
• Xcode ou Android Studio (configuré pour exécuter l’émulateur)
• React Native CLI

Pour obtenir des instructions étape par étape sur la façon de configurer votre environnement de développement React Native, vous pouvez lire le document intitulé officielle de React Native de React Native.

Avant de commencer à regarder comment mettre en œuvre la navigation dans notre application React Native, comprenons comment fonctionne le mécanisme de navigation par pile dans React Native.

Comprendre le fonctionnement de la navigation par pile

Imaginez que votre application React Native soit une pile. Initialement, sur cette pile, vous avez Accueil, qui est le premier écran qui s’affiche lorsque vous ouvrez l’application.

Si vous naviguez vers l’écran À propos de à partir de l’écran Accueil l’application pousserait A propos de sur la pile, de sorte qu’il se trouve au-dessus de Accueil. De la même manière, l’application place chaque nouvel écran vers lequel vous naviguez dans la pile.

Maintenant, si vous voulez revenir à l’écran précédent, l’application fait sortir votre écran actuel de la pile et vous montre celui qui se trouve en dessous. Ce comportement est similaire à ce qui se passe lorsque vous cliquez sur l’icône « retour » dans votre navigateur web.

Avec une compréhension claire du mécanisme de navigation dans la pile, il est maintenant temps de le mettre en place dans une application React Native.

1. Installer React Navigation pour les applications natives

Pour commencer, installez le fichier React navigation package pour les applications natives dans votre projet React Native en exécutant cette commande dans un terminal :

Le paquet que vous venez d’installer nécessite React Native Stack et Écrans React Native pour fonctionner correctement. Pour installer RN Stack, exécutez :

Pour installer le second, exécutez ceci :

Vous avez maintenant tout ce qu’il vous faut pour commencer à créer le mécanisme de navigation dans votre application. L’étape suivante consiste à configurer les écrans.

2. Configurer l’écran dans votre application React Native

Pour cet exemple, nous ne créerons que deux écrans – l’écran d’accueil et l’écran about.

Créez un dossier nommé écrans dans le répertoire racine de votre application. Ensuite, créez deux fichiers nommés HomeScreen.js et AboutScreen.js dans le répertoire screens.

Ce qu’il faut ajouter à votre fichier HomeScreen.js

Ouvrez le fichier HomeScreen.js et commencez par importer ce qui suit :

Ensuite, créez le composant fonctionnel HomeScreen et accédez à l’objet de navigation en utilisant la déconstruction d’objets (conformément aux meilleures pratiques de React), puis renvoyez un titre et un bouton pour naviguer vers l’écran about :

Ici, nous disons à React Native de naviguer vers À propos de lorsqu’un utilisateur appuie sur le bouton. Dans ce cas, nous ne transmettons aucune donnée à l’écran. Mais supposons que vous souhaitiez transmettre des données à la fonction ; voici comment procéder :

Maintenant, lorsque vous appuyez sur le bouton, ce code transmet les données à l’écran suivant, A propos de. À l’intérieur de l’écran AboutScreen.js vous pouvez accéder aux données de la route et les afficher dans l’interface utilisateur.

Ce qu’il faut ajouter à votre fichier AboutScreen.js

Ouvrez le fichier AboutScreen.js et commencez par importer les dépendances suivantes :

Ensuite, créez le fichier AboutScreen qui récupère les données de l’écran route.params et renvoie les données dans l’interface utilisateur :

Si vous vous souvenez, nous avons spécifié une seule propriété dans l’objet de données nommé nom du site web que nous rendons maintenant à l’intérieur de l’objet <Texte /> . Vous pouvez ajouter autant de propriétés que vous le souhaitez dans l’objet et y accéder à l’intérieur du composant d’écran cible.

L’étape suivante consiste à configurer notre navigateur de pile avec les deux écrans.

3. Connecter les écrans avec le navigateur de pile

Dans App.js, commencez par importer les dépendances suivantes :

Aux lignes deux et trois, nous avons importé les deux écrans que nous venons de créer. Ensuite, nous avons importé NavigationContainer

à partir de @react-navigation/native et createNativeStackNavigator à partir de @react-navigation/native-stack pour nous aider à connecter les écrans.

Ensuite, appelez createNativeStackNavigator pour récupérer la pile :

Cela nous permet d' »empiler » les écrans entre lesquels vous voulez passer dans votre application.

Créez la fonction du composant App et renvoyez les deux écrans dans l’élément <Stack.Navigation> comme indiqué ci-dessous. Veillez à l’intégrer dans le composant <NavigationProvider> sinon cela ne fonctionnera pas :

Ce code place l’écran HomeScreen en haut de la pile, ce qui signifie que l’application rendra d’abord le composant Home lorsqu’elle aura fini de se charger.

Maintenant, tout est prêt. Vous pouvez tester l’application en cliquant sur le bouton Aller à propos de dans l’interface d’accueil. Cela devrait vous rediriger vers À propos de et vous y trouverez la section nom du site affichée dans l’interface utilisateur :

La meilleure chose à propos de l’utilisation de React Navigation for Native est qu’elle est si facile à mettre en place et à utiliser. Il ne nécessite aucune configuration supplémentaire (en dehors des bibliothèques requises que vous avez installées), et vous pouvez également connecter des fichiers différents types de Paywalls (si vous avez l’intention de construire une application basée sur l’abonnement).

En savoir plus sur React Native

React Native est un framework multiplateforme qui permet de créer des applications fonctionnant sur les appareils Android et iOS. Il y a tant à apprendre sur React Native, et si vous n’avez pas l’habitude d’utiliser le framework, vous devriez commencer par apprendre les bases.

S’abonner à notre newsletter