La navigation dans React Native.

Par malcheikhali, 21 février, 2025

Navigation

Dans ce blog, je vais parler de la navigation sur React Native et de ses avantages, ainsi que de sa facilité d'utilisation.

Tout d'abord, pour comprendre la navigation dans une application mobile, elle se fait souvent par le biais d'un bouton sur l'écran qui déclenche une fonction permettant de changer de page.

Souvent, ceci est fait avec une syntaxe ressemblant à :

<a
  onClick={() => {
    window.location.href = 'details.html';
  }}
>

Malgré le fait que le href ait toujours bien fonctionné, celui-ci peut parfois causer des problèmes. S'il arrive que l'on doive naviguer vers une page qui ne se trouve pas dans le même répertoire du projet d'application mobile, il faut se casser la tête pour trouver le bon chemin, au risque de faire une erreur qui pourrait faire planter l'application, une erreur qui pourrait passer inaperçue lors du développement.

Cependant, dans React Native, il existe une bibliothèque développée par les créateurs de React Native permettant d’implémenter facilement la navigation lors du développement d’une application, tout en minimisant les erreurs.

Il faut tout d'abord, dans un projet React Native, exécuter cette commande à la racine du projet :

npm install @react-navigation/native @react-navigation/native-stack

Ceci va installer la bibliothèque dans le projet afin qu'elle puisse être utilisée.

Ensuite, on se rend dans le fichier TypeScript dans lequel on veut implémenter la navigation et on ajoute cette importation :

import {NavigationContainer, useNavigation} from '@react-navigation/native';

Après avoir importé la navigation dans le fichier TSX concerné, il suffit de l'instancier :

const navigation = useNavigation();

Cette constante permet d'appeler la fonction de navigation plusieurs fois, si nécessaire, dans le fichier où elle est définie.

Pour finir, il suffit d'appeler la navigation vers la route souhaitée, comme par exemple à partir d'un bouton :

<Button onPress={() => navigation.navigate('FichierVoulu')}>
        Go to Details
      </Button>

Ainsi, il est simple de faire l'appel à une autre route (page) à partir de n'importe où. De plus, on n'a pas besoin de se casser la tête à trouver le chemin du fichier voulu, le framework de React Native s'occupe de trouver la bonne route. La seule exception serait si la route demandée a deux ou plusieurs fichiers ayant le même nom, auquel cas il faudra spécifier le bon chemin.

Pour conclure, la mise en place de la bibliothèque pour la navigation et de son importation peut être longue, mais elle offre en contrepartie un bon avantage et une grande fluidité de code, ce que je trouve personnellement mieux que de faire des chemins bruts, qui sont moins fluides et moins faciles à comprendre pour un développeur.

Références :

Documentation officielle React Native React Navigation

Étiquettes

Commentaires