Comment fonctionne la navigation dans React Native ?

Question

Accepted Answer

React Native n'inclut pas la navigation intégrée — la solution standard est **React Navigation** (une bibliothèque populaire) pour passer d'un écran à un autre. Elle fournit des navigateurs (stack, tabs, drawer) et gère l'état de navigation, l'historique et les transitions. ## Pourquoi c'est important Comprendre la navigation dans React Native est essentiel car **la plupart des applications ont plusieurs écrans**, et naviguer entre eux est fondamental pour la fonctionnalité de l'application, c'est donc une connaissance incontournable. Importamment, React Native **n'inclut pas la navigation intégrée**, il est donc nécessaire de comprendre que **React Navigation** est la bibliothèque standard, de facto pour cela — une connaissance pratique nécessaire. Comprendre les **navigateurs** — **stack** (push/pop d'écrans pour la navigation avant/arrière, la plus courante), **tab** (onglets bas/hauts pour basculer entre les sections de l'application), et **drawer** (menu latéral) — est essentiel car ils structurent la façon dont les utilisateurs se déplacent dans une application, et la plupart des applications les combinent (par exemple, des onglets contenant des stacks) pour leur navigation. Comprendre la **navigation par stack** (définir les écrans dans un navigateur et utiliser `navigation.navigate` pour passer entre eux) est la compétence de navigation fondamentale. Comprendre le **passage de données** (via des paramètres lors de la navigation, lus de `route.params` dans la cible — puisque les écrans doivent couramment partager des données, comme passer un élément à un écran de détails) et **revenir en arrière** (`navigation.goBack`, la stack gérant automatiquement le bouton retour) est essentiel pour les flux de navigation réels. Puisque pratiquement toutes les applications ont plusieurs écrans et naviguer entre eux (avec passage de données) est fondamental, et puisque React Native nécessite React Navigation (la bibliothèque standard) pour cela — avec ses navigateurs, la navigation écran à écran, et le passage de paramètres — comprendre la navigation dans React Native est une connaissance essentielle, fondamentale — une capacité centrale nécessaire dans presque toutes les applications React Native, nécessitant la bibliothèque React Navigation standard, et nécessaire pour construire les expériences multi-écrans que les vraies applications exigent, une chose importante à savoir étant donné que la navigation n'est pas intégrée dans React Native lui-même. ## React Navigation — la bibliothèque standard ```text Navigation isn't built into React Native → use REACT NAVIGATION (the de facto standard): → provides NAVIGATORS that structure how users move between screens: STACK navigator → push/pop screens (like a stack — forward/back, the most common) TAB navigator → bottom/top tabs (switch between sections) DRAWER navigator → a side drawer menu → handles navigation state, history (back stack), transitions, headers ``` ## Exemple de navigation par stack ```jsx // define screens in a stack navigator const Stack = createNativeStackNavigator(); function App() { return ( ); } // navigate between screens (the navigation prop is passed to screens) function HomeScreen({ navigation }) { return

Pourquoi c'est important

React Navigation — la bibliothèque standard

Exemple de navigation par stack

Passage de données et retour en arrière