Découvrez comment créer un système de navigation solide pour votre application React Native à l'aide de la bibliothèque React Navigation.

Les applications mobiles doivent disposer d'un système de navigation qui guide les utilisateurs sans effort à travers divers é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 sans effort construire un excellent système de navigation mobile.

Installation de la bibliothèque de navigation React

React Navigation propose trois modèles de navigation principaux, à savoir la navigation Stack, Tab et Drawer pour créer 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/natif
npm installer les écrans natifs de réaction réagir le contexte de la zone de sécurité native
instagram viewer

Configuration d'un navigateur

Chaque navigateur au sein de React Navigation vit dans sa propre bibliothèque séparée. Pour utiliser l'un des navigateurs, vous devrez les installer individuellement.

Une structure de projet bien pensée est utile lors de la création d'un système de navigation pour votre application mobile. Une bonne pratique consiste à créer un src dossier dans le répertoire racine de votre projet. Dans ce dossier, vous devriez avoir un écrans dossier. Cela servira à séparer les composants de votre écran des autres composants.

Vous écrirez le code pour configurer le modèle de navigation que vous utilisez dans le cadre de votre projet. App.js déposer.

Création d'un navigateur dans le App.js file est une bonne pratique pour plusieurs raisons :

  • Le App.js Le fichier est généralement le composant de niveau supérieur d'une application React Native. La définition du navigateur dans ce fichier garantira que la hiérarchie de navigation est au niveau le plus élevé de votre arborescence de composants et accessible partout.
  • Placer le navigateur dans le App.js vous permet d'accéder facilement à l'état et aux accessoires de l'application et de les transmettre aux écrans du navigateur.
  • Réagissez la navigation NavigationContainer fournit le contexte nécessaire à la navigation et se trouve généralement à l'intérieur App.js. En plaçant le Navigateur dans le même fichier, vous pouvez facilement l'intégrer avec le NavigationContainer.

Navigateur de pile

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é au-dessus du précédent.

Lorsqu'un nouvel écran est poussé au-dessus de la pile, il devient l'écran actif et l'écran précédent est projeté en dessous. Cela permet aux utilisateurs de naviguer dans la pile, comme le flux de navigation d'un site Web. Tu peux configurer le navigateur de pile pour passer d'un écran à l'autre.

Par exemple:

importer Réagir depuis'réagir';
importer { ConteneurNavigation } depuis'@react-navigation/natif';
importer { createStackNavigator } depuis'@react-navigation/pile';
// Importez vos composants d'écran
importer Écran d'accueil depuis'./screens/écran d'accueil';
importer DétailsÉcran depuis'./screens/DetailsScreen';


constante Pile = createStackNavigator();


constante Application = () => {
retour (


"Maison" composant={HomeScreen} />
"Détails" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
exporterdéfaut application ;

Le bloc de code ci-dessus crée un composant Stack Navigator en utilisant createStackNavigator() de la bibliothèque de navigation.

Dans cet exemple, le Stack Navigator comporte deux écrans: Maison et Détails.

Installez maintenant Stack Navigator :

npm install @react-navigation/pile

À l'intérieur Écran d'accueil, vous pouvez utiliser le la navigation objet pour tester le Stack Navigator :

importer { Feuille de style, vue, bouton } depuis"réagir natif";
importer Réagir depuis"réagir";
constante Écran d'accueil = ({ la navigation }) => {
retour (

 titre="Aller vers .."
 onPress={() => navigation.navigate("Écran de détail")}
 />
 </View>
 );
};


exporterdéfaut Écran d'accueil;
constante styles = StyleSheet.create({});
2 photos

Remarquez comment Stack Navigator crée automatiquement un bouton fléché pour gérer la navigation vers les écrans précédents.

Navigateur d'onglets

Dans certaines situations, avoir un système de navigation aller-retour comme Stack Navigator n'offre pas une expérience formidable. Un navigateur d'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 Web.

Pour commencer, installez le @react-navigation/bottom-tabs bibliothèque utilisant le gestionnaire de paquets NPM.

Avec createBottomNavigator(), vous pouvez créer une instance de Tab Navigator comme vous l'avez fait avec Stack Navigator :

importer { createBottomTabNavigator } depuis'@react-navigation/bottom-tabs';
constante Tab = createBottomTabNavigator();

Ensuite, définissez les écrans que vous souhaitez sous forme d'onglets dans le navigateur et NavigationContainer:

exporterdéfautfonctionApplication() {
retour (


 nom="Maison"
 composant={HomeScreen}
 option={{ titre: "Maison" }}
 />
 nom="Profil"
 composant={ProfileScreen}
 option={{ titre: "Profil" }}
 />
 nom="Détails"
 composant={DetailScreen}
 option={{ titre: "Détails" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

Lors de l'exécution de votre application, vous devriez voir un navigateur d'onglets avec vos écrans définis en bas.

3 photos

Vous pourriez utiliser le tabBarPosition option de positionner le navigateur au haut, droite, gauche, ou bas (défaut).

Navigateur de tiroir

Les navigateurs de tiroirs, ou tiroirs, sont un modèle de navigation courant dans les applications mobiles. Vous pouvez ouvrir les tiroirs en balayant ou en appuyant sur un bouton. Cela fait glisser le tiroir depuis le côté de l'écran, révélant son contenu.

2 photos

Pour utiliser le navigateur de tiroir, installez-le avec gestionnaire de geste natif de réaction et réagir-natif-réanimé:

npm install @react-navigation/tiroir
npm installer réagir-native-gesture-handler réagir-native-réanimé

Vous devrez également configurer réanimé à l'intérieur de votre babel.config.js déposer:

module.exports = {
 préconfigurations: ["babel-preset-expo"],
 plugins: ["react-native-reanimated/plugin"],
};

Voici un exemple de configuration d'un navigateur de tiroir :

importer"react-native-gesture-handler"; // Cet import doit être en haut
importer { Affichage, Texte, Bouton } depuis"réagir natif";
importer { createDrawerNavigator } depuis"@react-navigation/tiroir";
importer { ConteneurNavigation } depuis"@react-navigation/natif";


constante Tiroir = createDrawerNavigator();


constante Contenu du tiroir = ({ la navigation }) => {
retour (
fléchir: 1, alignItems: "centre", JustifierContenu: "centre" }}>
taille de police: 24, fontWeight: "gras" }}>
 Bienvenue dans le tiroir
 </Text>

 Ceci est du contenu supplémentaire que vous pouvez afficher dans le tiroir.
 </Text>


constante Application = () => (

 NomRouteinitial="Maison"
 tiroirContent={(accessoires) => <Contenu du tiroir {...accessoires} />}
 >
 {/* Vos autres écrans ici */}
 </Drawer.Navigator>
 </NavigationContainer>
);
exporterdéfaut application ;

Dans cet exemple, le Contenu du tiroir le composant est passé en tant que tiroirContenu soutenir à createDrawerNavigator. À l'intérieur de Contenu du tiroir composant, vous pouvez personnaliser le contenu pour afficher les informations souhaitées à l'aide de composants de texte ou de tout autre élément et style.

Les navigateurs d'onglets sont statiques et toujours visibles. Ce n'est pas toujours le meilleur, car les onglets bloquent des parties de l'écran et peuvent détourner l'attention de l'écran principal. Vous pouvez utiliser les tiroirs comme navigateur d'onglets dynamiques et créer un menu de navigation dans les tiroirs. Les utilisateurs peuvent ensuite 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.

Tenez compte de ces meilleures pratiques pour tirer le meilleur parti du navigateur de tiroir :

  • Évitez de surcharger 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 associés de manière logique et intuitive pour aider les utilisateurs à trouver rapidement ce qu'ils recherchent.
  • Utilisez des icônes ou des indicateurs visuels pour aider les utilisateurs à comprendre le but de chaque élément du tiroir.

Transmission de données avec des accessoires de navigation

React Navigation fournit un mécanisme puissant qui vous permet de transmettre des données via des accessoires de navigation.

Considérez un scénario dans lequel vous avez une liste d'éléments sur un écran et lorsqu'un utilisateur sélectionne un élément, vous souhaitez transmettre les données correspondantes à un autre écran.

Tout d'abord, vous devez définir votre structure de navigation. Maintenant, pour transmettre les données du Écran d'accueil à un Écran de détail lorsqu'un élément est sélectionné, à l'intérieur Écran d'accueil définissez une fonction qui gère la navigation et inclut les données que vous souhaitez transmettre.

importer Réagir depuis'réagir';
importer { Affichage, Texte, Bouton } depuis'réagir natif';
constante Écran d'accueil = ({ la navigation }) => {
constante handleItemPress = (article) => {
 navigation.naviguer('Écran de détail', { article });
 };


retour (

Liste de Articles</Text>
exporterdéfaut Écran d'accueil;

Le handleItemPress fonction utilise le navigation.naviguer méthode pour accéder à la Écran de détail 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 du Écran de détail composant, vous aurez besoin du la navigation soutenir:

importer Réagir depuis'réagir';
importer { Afficher, Texte } depuis'réagir natif';
constante Écran de détail = ({ la navigation }) => {
constante élément = navigation.getParam('article', '');


retour (

Écran de détail</Text>
{élément}</Text>
 </View>
 );
};
exporterdéfaut Écran de détail ;

Ici le Écran de détail utilisations des composants navigation.getParam pour récupérer l'élément transmis à partir des 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. De cette façon, votre application ne plantera pas lors du rendu.

Selon la complexité de votre application, vous pouvez explorer l'utilisation de bibliothèques de gestion d'état comme Redux ou l'API de contexte pour gérer et partager des données à l'échelle mondiale.

Organisation de votre code de navigation

Organiser correctement votre code de navigation vous aidera à créer 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.

Avec 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.