Souvent, lorsque vous créez une application React Native, vous la composez à partir de différents écrans comme Login, Home et About. Vous devrez alors mettre en place un mécanisme de navigation pour que vos utilisateurs puissent naviguer dans l’application 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 inclut 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)
- CLI React Native
Pour des instructions pas à pas sur la façon de configurer votre environnement de développement React Native, vous pouvez lire la documentation officielle sur la configuration de React Native.
Avant de commencer à regarder comment mettre en œuvre la navigation dans notre application React Native, comprenons comment le mécanisme de navigation par pile fonctionne 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 AccueilIl s’agit du premier écran qui s’affiche lorsque vous ouvrez l’application.
Si vous naviguez jusqu’à l’écran A propos de écran de la Accueil l’application pousserait l’écran A propos de sur la pile, de façon à ce qu’il se trouve au-dessus de Accueil. De même, l’application ajoute à la pile chaque nouvel écran vers lequel vous naviguez.
Maintenant, si vous voulez revenir à l’écran précédent, l’application fait sortir l’écran actuel de la pile et vous montre celui qui se trouve en dessous. Ce comportement est similaire à celui qui se produit 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 package React navigation for native apps dans votre projet React Native en exécutant cette commande dans un terminal :
npm i @react-navigation/native
Le package que vous venez d’installer nécessite React Native Stack et React Native Screens pour fonctionner correctement. Pour installer RN Stack, exécutez :
npm i @react-navigation/native-stack
Pour installer le second, exécutez ceci :
npm i react-native-screens
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 écrans.
Que faut-il ajouter à votre fichier HomeScreen.js ?
Ouvrez le fichier HomeScreen.js et commencez par importer ce qui suit :
import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import { useState } from 'react'
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 :
export default function HomeScreen({navigation}) {
return (
<View style={styles.container}>
<Text style={styles.paragraph}> Home Screen </Text>
<Button
title="Go to About"
onPress={() => navigation.navigate('AboutScreen')}
/>
</View>
);
}
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 :
export default function HomeScreen({navigation}) {
const data = { websiteName: "John's Tech" }
return (
<View style={styles.container}>
// Text goes here
<Button
title="Go to About"
onPress={() => navigation.navigate('AboutScreen', data)}
/>
</View>
);
}
Lorsque vous appuyez sur le bouton, ce code transmet les données à l’écran suivant, A propos de. A l’intérieur de la AboutScreen.js vous pouvez accéder aux données de la route et les afficher dans l’interface utilisateur.
Que faut-il ajouter à votre fichier AboutScreen.js ?
Ouvrez le fichier AboutScreen.js et commencez par importer les dépendances suivantes :
import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
Ensuite, créez le fichier AboutScreen composant fonctionnel qui récupère les données de l’écran route.params et renvoie les données dans l’interface utilisateur :
export default function AboutScreen({route}) {
let dataObj = route.params
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
This is the About Screen of {dataObj.websiteName}
</Text>
</View>
);
}
Si vous vous souvenez, nous avons spécifié une seule propriété dans l’objet de données, nommée nom du site webque nous rendons maintenant à l’intérieur de l’élément <Text /> ; . Vous pouvez ajouter autant de propriétés que vous le souhaitez dans l’objet et y accéder dans le composant des écrans cibles.
L’étape suivante consiste à configurer notre navigateur de pile avec les deux écrans.
3. Connecter les écrans au navigateur de pile
Dans App.js, commencez par importer les dépendances suivantes :
import * as React from 'react';
import HomeScreen from './screens/HomeScreen'
import AboutScreen from './screens/AboutScreen'
import { NavigationContainer } from "@react-navigation/native"
import { createNativeStackNavigator } from "@react-navigation/native-stack"
Aux lignes 2 et 3, nous avons importé les deux écrans que nous venons de créer. Ensuite, nous avons importé NavigationContainer
de @react-navigation/native et createNativeStackNavigator de @react-navigation/native-stack pour nous aider à connecter les écrans.
Ensuite, appelez créerNativeStackNavigator pour récupérer la pile :
const Stack = createNativeStackNavigator()
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 la fonction <Stack.Navigation> ; comme indiqué ci-dessous. Veillez à l’insérer dans la balise <NavigationProvider> ; ou cela ne fonctionnera pas :
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="HomeScreen" component = {HomeScreen} />
<Stack.Screen name="AboutScreen" component = {AboutScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
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 dans A propos de sur l’interface d’accueil. Cela devrait vous rediriger vers À propos deet vous trouverez le nom du site affichée dans l’interface utilisateur :
2 Images
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 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 ce framework, vous devriez commencer par en apprendre les bases.
