Les applications mobiles doivent disposer d’un système de navigation qui guide les utilisateurs sans effort à travers les différents écrans et fonctionnalités.
React Navigation, une bibliothèque de navigation puissante et flexible pour React Native, peut vous aider à créer cette expérience. En exploitant ses capacités, vous pouvez construire sans effort un excellent système de navigation mobile.
React Navigation propose trois modèles de navigation principaux, à savoir la navigation par pile, par onglet et par tiroir, pour construire un système de navigation. Ces modèles de navigation fournissent un cadre pour organiser et gérer la navigation entre les différents écrans de votre application.
Pour commencer à utiliser React Navigation, installez la bibliothèque et ses dépendances nécessaires :
npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
Chaque navigateur de React Navigation vit dans sa propre bibliothèque. Pour utiliser l’un ou l’autre des navigateurs, vous devez les installer individuellement.
Une structure de projet bien pensée est utile lorsque vous construisez un système de navigation pour votre application mobile. Une bonne pratique consiste à créer un src dans le répertoire racine de votre projet. Dans ce dossier, vous devez avoir un fichier écrans . Cela permettra de séparer les composants de l’écran des autres composants.
Vous allez écrire le code pour mettre en place le modèle de navigation que vous utilisez à l’intérieur du fichier App.js fichier.
Création d’un navigateur à l’intérieur du App.js La création d’un fichier d’application est une bonne pratique pour plusieurs raisons :
- Le App.js Le fichier App.js est généralement le composant de premier niveau dans une application React Native. Définir le navigateur dans ce fichier permet de s’assurer que la hiérarchie de navigation se trouve au plus haut niveau de l’arborescence de vos composants et qu’elle est accessible partout.
- Placer le navigateur dans le fichier App.js vous permet d’accéder facilement à l’état de l’application et aux accessoires et de les transmettre aux écrans du navigateur.
- Le fichier de React Navigation NavigationContainer fournit le contexte nécessaire à la navigation et se trouve généralement à l’intérieur de App.js. En plaçant le Navigateur dans le même fichier, vous pouvez facilement l’intégrer à l’application NavigationContainer.
Le Stack Navigator est le modèle de navigation le plus populaire de la bibliothèque React Navigation. Il utilise une structure de données en pile où chaque écran est un composant complètement différent et est empilé sur le précédent.
Lorsqu’un nouvel écran est poussé sur le dessus de la pile, il devient l’écran actif, et l’écran précédent est jeté en dessous. Cela permet aux utilisateurs de naviguer d’avant en arrière dans la pile, comme dans le flux de navigation d’un site web. Vous pouvez configurer le navigateur de pile pour passer d’un écran à l’autre.
Par exemple :
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
// Import your screen components
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';
const Stack = createStackNavigator();
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
Le bloc de code ci-dessus crée un composant Stack Navigator à l’aide de la fonction createStackNavigator() de la bibliothèque de navigation.
Dans cet exemple, le Stack Navigator comporte deux écrans : Accueil et Détails.
Installez maintenant le Stack Navigator :
npm install @react-navigation/stack
A l’intérieur Écran d’accueil, vous pouvez utiliser la fonction navigation pour tester le Stack Navigator :
import { StyleSheet, View, Button } from "react-native";
import React from "react";
const HomeScreen = ({ navigation }) => {
return (
<View>
<Button
title="Navigate to .."
onPress={() => navigation.navigate("DetailScreen")}
/>
</View>
);
};
export default HomeScreen;
const styles = StyleSheet.create({});
2 Images
Remarquez que le Stack Navigator crée automatiquement un bouton fléché pour gérer la navigation vers les écrans précédents.
Dans certaines situations, un système de navigation en va-et-vient comme le Stack Navigator n’offre pas une bonne expérience. Un navigateur à onglets est mieux adapté à ces cas. Il affiche les écrans de navigation disponibles en amont pour l’utilisateur et peut être plus facile à utiliser, comme une barre de navigation sur le web.
Pour commencer, installez le programme @react-navigation/bottom-tabs bibliothèque en utilisant le gestionnaire de paquets NPM.
Avec createBottomNavigator()Vous pouvez créer une instance du Tab Navigator comme vous l’avez fait avec le Stack Navigator :
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
Ensuite, définissez les écrans que vous voulez comme des onglets dans le navigateur et NavigationContainer:
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{ title: "Home" }}
/>
<Tab.Screen
name="Profile"
component={ProfileScreen}
options={{ title: "Profile" }}
/>
<Tab.Screen
name="Details"
component={DetailScreen}
options={{ title: "Details" }}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
Lorsque vous lancez votre application, vous devriez voir un navigateur d’onglets avec vos écrans définis en bas.
3 Images
Vous pouvez utiliser la fonction tabBarPosition option de positionner le navigateur au niveau de la barre de tabulation. haut, droit, gaucheou bas (par défaut).
Les navigateurs à tiroir, ou tiroirs, sont un modèle de navigation courant dans les applications mobiles. Vous pouvez ouvrir les tiroirs en glissant ou en tapant sur un bouton. Le tiroir se glisse alors sur le côté de l’écran, révélant son contenu.
2 Images
Pour utiliser le Drawer Navigator, installez-le avec react-native-gesture-handler et react-native-reanimated:
npm install @react-navigation/drawer
npm install react-native-gesture-handler react-native-reanimated
Vous devrez également configurer reanimated dans votre babel.config.js fichier :
module.exports = {
presets: ["babel-preset-expo"],
plugins: ["react-native-reanimated/plugin"],
};
Voici un exemple de configuration d’un navigateur de tiroirs :
import "react-native-gesture-handler"; // This import must be at the top
import { View, Text, Button } from "react-native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationContainer } from "@react-navigation/native";
const Drawer = createDrawerNavigator();
const DrawerContent = ({ navigation }) => {
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<Text style={{ fontSize: 24, fontWeight: "bold" }}>
Welcome to the Drawer
</Text>
<Text>
This is some extra content that you can display in the drawer.
</Text>
<Button title="Close Drawer" onPress={() => navigation.closeDrawer()} />
</View>
);
};
const App = () => (
<NavigationContainer>
<Drawer.Navigator
initialRouteName="Home"
drawerContent={(props) => <DrawerContent {...props} />}
>
{/* Your other screens here */}
</Drawer.Navigator>
</NavigationContainer>
);
export default App;
Dans cet exemple, le Contenu du tiroir est transmis en tant que composant contenu du tiroir rapporté à createDrawerNavigator. A l’intérieur du Contenu du tiroir vous pouvez personnaliser le contenu pour afficher les informations souhaitées à l’aide de composants textuels ou de tout autre élément et style.
Les navigateurs à onglets sont statiques et toujours visibles. Ce n’est pas toujours la meilleure solution, car les onglets bloquent des parties de l’écran et peuvent détourner l’attention de l’écran principal. Vous pouvez utiliser des tiroirs comme navigateurs d’onglets dynamiques et créer un menu de navigation à l’intérieur des tiroirs. Les utilisateurs peuvent alors ouvrir le tiroir pour trouver un menu de navigation.
Vous pouvez également utiliser le tiroir pour afficher du contenu supplémentaire, comme une barre de recherche, un profil d’utilisateur, des informations contextuelles ou tout ce qui ne nécessite pas une vue en plein écran.
Prenez en compte ces bonnes pratiques pour tirer le meilleur parti du navigateur à tiroir :
- Évitez de submerger le tiroir avec trop d’options et concentrez-vous sur la présentation des fonctionnalités les plus pertinentes et les plus fréquemment utilisées.
- Classez les éléments connexes de manière logique et intuitive pour aider les utilisateurs à trouver rapidement ce qu’ils cherchent.
- Utilisez des icônes ou des indicateurs visuels pour aider les utilisateurs à comprendre l’utilité de chaque élément du tiroir.
React Navigation fournit un mécanisme puissant qui vous permet de passer des données à travers des accessoires de navigation.
Considérons un scénario dans lequel vous avez une liste d’éléments sur un écran, et quand un utilisateur sélectionne un élément, vous voulez passer les données correspondantes à un autre écran.
Vous devez d’abord définir votre structure de navigation. Maintenant, pour passer les données de l’écran Écran d’accueil vers un DetailScreen lorsqu’un élément est sélectionné, à l’intérieur Écran d’accueil définir une fonction qui gère la navigation et inclut les données que vous souhaitez transmettre.
import React from 'react';
import { View, Text, Button } from 'react-native';
const HomeScreen = ({ navigation }) => {
const handleItemPress = (item) => {
navigation.navigate('DetailScreen', { item });
};
return (
<View>
<Text>List of Items</Text>
<Button title="Item 1" onPress={() => handleItemPress('Item 1 Data')} />
<Button title="Item 2" onPress={() => handleItemPress('Item 2 Data')} />
</View>
);
};
export default HomeScreen;
La fonction handleItemPress utilise la fonction navigation.navigate pour naviguer vers la page d’accueil de l’application DetailScreen tout en transmettant les données de l’élément sélectionné en tant que paramètre dans le deuxième argument.
Pour pouvoir accéder aux données transmises à l’intérieur de la fonction DetailScreen vous aurez besoin du composant navigation prop :
import React from 'react';
import { View, Text } from 'react-native';
const DetailScreen = ({ navigation }) => {
const item = navigation.getParam('item', '');
return (
<View>
<Text>Detail Screen</Text>
<Text>{item}</Text>
</View>
);
};
export default DetailScreen;
Ici, le DetailScreen utilisation des composants navigation.getParam pour récupérer l’élément passé dans les accessoires de navigation. Dans cet exemple, une valeur par défaut d’une chaîne vide est définie au cas où les données ne seraient pas disponibles. Ainsi, votre application ne plantera pas au moment du rendu.
En fonction de la complexité de votre application, vous pouvez envisager d’utiliser des bibliothèques de gestion d’état comme Redux ou l’API contextuelle pour gérer et partager les données de manière globale.
Organiser correctement votre code de navigation vous aidera à construire une application React Native évolutive et collaborative. Vous pouvez le faire en décomposant la logique de navigation en modules gérables. Cela facilitera la lecture et la compréhension.
Grâce à cela, vous pouvez être sûr de créer une navigation transparente pour vos utilisateurs tout en profitant de l’expérience de développement.