La navigation en React Native

Dans le développement d’application mobiles, il est rare voire impossible de trouver une application avec un seul écran. Le principe de la gestion de la présentation et de la transition entre plusieurs écrans s’intitule la navigation. Plus précisément, il fait référence à la manière dont les utilisateurs vont interagir avec les différentes vues de l’application.

En React Native, la navigation est fondée sur des composants d'écran, où chaque écran représente une vue spécifique de l'application. Les applications peuvent tirer parti de plusieurs fonctionnalités avancées telles que la navigation basée sur les actions, les modales, la gestion de l'état de la navigation, ainsi que d'autres fonctionnalités.

Pour permettre aux développeurs de créer des expériences utilisateur fluides et intuitive, React Native met à disposition une panoplie de solutions pour la navigation, la bibliothèque la plus utilisées par les développeurs est React Navigation.

React Navigation

Utilisée à la fois pour les applications Android et pour les applications IOS, React Navigation est une bibliothèque autonome et très populaire en React Native qui offre une approche efficace pour la navigation. Elle permet aux développeurs de définir une structure de navigation dans un format facile à comprendre. En plus de la navigation entre les écrans, elle facilite le partage de données. Cet outil prend en charge différents types de navigations, tels que la navigation par onglets, la navigation par empilement, la navigation par côte à côte, etc. 

Installation et configuration 

Pour profiter optimiser la navigation entre les écrans, il faut installer quelques dépendances en suivant les étapes suivantes : 

• Installer dans votre projet les dépendances de la bibliothèque React Navigation :
  • npm install @react-navigation/native @react-navigation/native-stack
• Si votre projet est géré par Expo.
  • npx expo install react-native-screens react-native-safe-area-context
• S’il s’agit d’un projet React Native seulement :
  • npm install react-native-screens react-native-safe-area-context
• Pour la plateforme IOS, il faut installer CocoaPods au préalable pour exécuter les commandes suivantes.
  •  cd ios,
  • Pod install.

Navigation entre les écrans

 Une fois les dépendances installées, voyons un exemple concret de l’utilisation de la navigation. Tous d’abord, il est nécessaire d’envelopper l’intégralité de l’application dans un composant NavigationContainer. Cela doit être réalisé dans un fichier de départ tel que index.js ou encore App.js.

Ensuite, on définis deux écrans qui sont «Home et Profile» à l’aide du composant «Stack.Screen». Pour chaque écran, des options peuvent être attribuées, telles que le titre, à l'aide de la propriété options de Stack.Screen. Voici un exemple complet du processus :

Le navigateur «native-stack» utilise les API natives «UINavigationController» sur IOS et «Fragment» sur Android. Cela garantit que la navigation construite avec «createNativeStackNavigator» se comporte de la même manière et possède les mêmes caractéristiques de performances que les applications construites nativement sur ces API respectives. 

En effet, chaque écran prend un accessoire «component». Ce composant reçoit un message appelé «navigation» qui dispose différentes méthodes pour accéder à d’autres écrans. Dans l’exemple suivant, pour accéder à l’écran «Profile», on utilise navigation.navigate('Profile', { name: 'Jane' }).

Partage de données entre écrans

Dans les applications mobiles, le partage de données est un processus crucial. Il est utilisé dans plusieurs cas, tels que les formulaires d'inscription, la communication entre composants, ou encore l'affichage de contenu dynamique basé sur des interactions utilisateur. Dans les lignes qui suivent, nous allons illustrer l'affichage de contenu dynamique.

Pour ce faire, il est essentiel de créer deux écrans. L'un concerne l'écran « Home », où l'on affichera l'ensemble des titres de chaque élément d'une liste. L'autre écran, nommé « reviewDetails », est dédié à l'affichage des détails de chaque élément, dépendamment sur lequel l'utilisateur aurait cliqué.

En premier lieu, dans un fichier nommé «home.js», on définira notre liste d’éléments, puis on affiche le titre de chaque élément à l’aide du composant React Native «FlatList». «TouchableOpacity» est un composant cliquable qui nous permettra d’accéder au deuxième écran qui comporte les détails d’un élément spécifique. Comme le montre l’image suivante, dans le paramètre de la méthode «navigate», on passe l’élément (item) sur lequel l’utilisateur a cliqué. 

En deuxième lieu, dans un fichier nommé «reviewDetails.js», à l’aide de la «navigation» passée en paramètre de la fonction ReveiwDetails, on affiche les détails de chaque élément. Par exemple, si on veut afficher le valeur du paramètre «body», on utilise la méthode navigation.getParam(‘body’) dans un component «Text». Voici un exemple visuel plus démonstratif.

Conclusion

En résumé, maîtriser la navigation et le partage de données en React Native, avec des outils tels que React Navigation, ouvre la voie à la création d'applications mobiles riches en fonctionnalités et offrant une expérience utilisateur optimale. 

Références

1. Adrien Thiery, «Solutions de navigation React Native en 2018», OSEDEA, https://www.osedea.com/fr/blogue/solutions-navigation-react-native, (page consultée le 28 Février 2024).
2. «Navigation entre les écrans», Runebook.dev, https://runebook.dev/fr/docs/react_native/navigation, (page consultée le 28 Février 2024). 
3. Zeb Girouard, «Comment utiliser le routage avec React Navigation dans React Native», DigitalOcean, https://www.digitalocean.com/community/tutorials/react-react-native-navigation-fr, (page consultée le 28 Février 2024).
4. Ludovic Renzetti, «Gérer facilement la navigation avec React Native», kaliop, https://www.kaliop.com/fr/gerer-facilement-la-navigation-avec-react-native/, (page consultée le 28 février 2024).
5. «Navigating Between Screens», React Native, https://reactnative.dev/docs/navigation,  (page consultee le 28 Février 2024).
6. Net Ninja, «React Native Tutorial #22 - Passing Data Between Screens», Royaume-Uni, 2019, 8 minutes, coul, https://www.youtube.com/watch?v=-40TBdSRk6E.