Comment naviguer entre les écrans dans une application native React

Souvent, lors de la création d'une application React Native, vous la composez à partir de différents écrans tels que Connexion, Accueil et À propos. Vous devrez ensuite implémenter un mécanisme de navigation afin que vos utilisateurs puissent naviguer dans l'application et accéder à ses écrans individuels dans le bon ordre.

Le but de ce tutoriel est de vous guider tout au long du processus de configuration 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 que tu commences

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

• Node.js v10 ou supérieur
• Code X ou Studio Android (configuré pour exécuter l'émulateur)
• Réagissez à l'interface de ligne de commande native

Pour obtenir des instructions détaillées sur la configuration de votre environnement de développement React Native, vous pouvez lire le officiel React Native documentation de mise en place.

Avant de commencer à regarder comment implémenter la navigation dans notre application React Native, comprenons comment le mécanisme de navigation de la pile fonctionne dans React Native.

Comprendre le fonctionnement de la navigation dans la pile

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

Si vous deviez naviguer vers le À propos écran de la Maison l'écran, l'application pousserait À propos sur la pile, de sorte qu'il repose sur le dessus de Maison. De même, l'application pousse chaque nouvel écran vers lequel vous naviguez sur la pile.

Maintenant, si vous voulez revenir à l'écran précédent, l'application fait apparaître votre écran actuel de la pile et vous montre celui en dessous. Ce comportement est similaire à ce qui se passe lorsque vous cliquez sur l'icône "Précédent" dans votre navigateur Web.

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

1. Installer React Navigation pour les applications natives

Pour commencer, installez le Pack de navigation React pour les applications natives de votre projet React Native en exécutant cette commande sur un terminal :

npm je @réagir-la navigation/indigène

Le package que vous venez d'installer nécessite Réagir à la pile native et Réagissez aux écrans natifs pour fonctionner correctement. Pour installer RN Stack, exécutez :

npm je @réagir-la navigation/indigène-empiler

Pour installer le second, exécutez ceci :

npm je réagis-indigène-écrans

Vous avez maintenant tout ce dont vous avez besoin 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 allons créer seulement deux écrans: l'écran d'accueil et l'écran À propos.

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 écrans.

Quoi ajouter à votre fichier HomeScreen.js

Ouvrez le fichier HomeScreen.js et commencez par importer les éléments suivants :

importer * comme Réagir depuis'réagir';
importer { Texte, Affichage, Feuille de style, TouchableOpacity } depuis'réagir natif';
importer { useState } depuis'réagir'

Ensuite, créez le composant fonctionnel HomeScreen et accédez à l'objet de navigation à l'aide de la déconstruction d'objet (selon Réagissez aux bonnes pratiques), puis renvoyez un titre et un bouton pour naviguer vers l'écran À propos :

exporterdéfautfonctionÉcran d'accueil({la navigation}) { 
retour ( 
<Voirstyle={styles.container}>
<Textestyle={styles.paragraphe}> Écran d'accueil Texte>
 titre="Aller à propos"
 onPress={() => navigation.navigate("À propos de l'écran")} 
 /> 
Voir>
 );
}

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

exporterdéfautfonctionÉcran d'accueil({la navigation}) { 
constante données = { Nom du site Web: "La technologie de John" }
retour ( 
<Voirstyle={styles.container}>
// Le texte va ici 
 titre="Aller à propos"
 onPress={() => navigation.navigate("À propos de l'écran", données)} 
 /> 
Voir>
 );
}

Maintenant, lorsque vous appuyez sur le bouton, ce code transmet les données à l'écran suivant, À propos. À l'intérieur de AboutScreen.js fichier, vous pouvez accéder aux données de l'itinéraire et les afficher sur l'interface utilisateur.

Quoi ajouter à votre fichier AboutScreen.js

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

importer * comme Réagir depuis'réagir';
importer { Texte, Affichage, Feuille de style, Bouton } depuis'réagir natif';

Ensuite, créez le À propos de l'écran composant fonctionnel qui récupère les données du route.params propriété et renvoie les données dans l'interface utilisateur :

exporterdéfautfonctionÀ propos de l'écran({itinéraire}) { 
laisser dataObj = route.params
retour ( 
<Voirstyle={styles.container}>
<Textestyle={styles.paragraphe}>
 Ce est l'écran À propos de {dataObj.websiteName} 
Texte>
Voir>
 );
}

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 du composant. Vous pouvez ajouter autant de propriétés que vous le souhaitez dans l'objet et y accéder à l'intérieur du composant des écrans cibles.

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

3. Connecter les écrans avec le Stack Navigator

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

importer * comme Réagir depuis'réagir';
importer Écran d'accueil depuis'./screens/écran d'accueil'
importer À propos de l'écran depuis'./screens/AboutScreen'
importer { ConteneurNavigation } depuis"@react-navigation/natif"
importer { createNativeStackNavigator } depuis"@react-navigation/native-stack"

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

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

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

constante Pile = createNativeStackNavigator()

Cela nous permet « d'empiler » les écrans entre lesquels vous souhaitez effectuer la transition dans votre application.

Créez la fonction de composant App et renvoyez les deux écrans dans le comme indiqué ci-dessous. Assurez-vous de l'envelopper dans le ou ça ne marchera pas :

exporterdéfautfonctionApplication() { 
retour ( 
<NavigationContainer>
<Empiler. Navigateur>
<Empiler. Filtrernom="Écran d'accueil"composant = {Écran d'accueil} />
<Empiler. Filtrernom="À propos de l'écran"composant = {AboutScreen} />
Empiler. Navigateur>
NavigationContainer>
 );
}

Ce code place l'écran HomeScreen au-dessus de la pile, ce qui signifie que l'application affichera d'abord le composant Accueil une fois le chargement terminé.

Maintenant, tout est réglé. Vous pouvez tester l'application en cliquant sur le Aller à À propos bouton sur l'interface utilisateur d'accueil. Cela devrait vous rediriger vers À propos, et vous trouverez le Nom du site Web propriété affichée dans l'interface utilisateur :

La meilleure chose à propos de l'utilisation de React Navigation for Native est qu'il est si facile à configurer et à utiliser. Il ne nécessite aucune configuration supplémentaire (en plus des bibliothèques requises que vous avez installées), et vous pouvez également vous connecter différents types de paywalls (si vous avez l'intention de créer une application basée sur un abonnement).

En savoir plus sur React Native

React Native est un framework multiplateforme pour créer des applications qui s'exécutent sur des appareils Android et iOS. Il y a tellement de choses à apprendre sur React Native, et si vous débutez dans l'utilisation du framework, vous devriez commencer par apprendre les bases.