Installer et configurer React Navigation
Installez React Navigation et ses dépendances, enveloppez l’application dans un NavigationContainer et configurez votre premier navigateur en pile avec deux écrans.
Installer et configurer React Navigation est une leçon React Native Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Native Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Native Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
What is React Navigation?
React Navigation is the most popular library for handling navigation in React Native apps. It provides a set of navigators — Stack, Tab, Drawer — that let you move between screens, pass data, and manage navigation history. React Navigation is JavaScript-based and works seamlessly with Expo and bare React Native projects.
Installing Core Dependencies
React Navigation requires its core package plus a set of native dependencies. Run the install command and then install the native stack and required gesture/animation libraries.
npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-contextInstalling the Native Stack Navigator
The native stack navigator from @react-navigation/native-stack uses native platform navigation components for iOS and Android, giving you better performance and a more native feel than the JS-only stack. Install it alongside the core package.
npm install @react-navigation/native-stackWrapping App in NavigationContainer
Every React Navigation setup requires NavigationContainer to be the root wrapper of your app. It manages the navigation tree, handles the back button on Android, and provides navigation context to all child components. Wrap your entire app in it inside App.js.
import { NavigationContainer } from '@react-navigation/native';
export default function App() {
return (
<NavigationContainer>
{/* navigator goes here */}
</NavigationContainer>
);
}Creating a Stack Navigator
Use createNativeStackNavigator() to create a stack navigator. The function returns a Navigator and a Screen component. Nest Stack.Screen components inside Stack.Navigator to register your screens.
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name='Home' component={HomeScreen} />
<Stack.Screen name='Details' component={DetailsScreen} />
</Stack.Navigator>
);
}The initialRouteName Prop
By default the first screen listed in Stack.Navigator is the initial screen. You can explicitly set which screen appears first using the initialRouteName prop on Stack.Navigator. The value must match the name of one of the Stack.Screen children.
<Stack.Navigator initialRouteName='Details'>
<Stack.Screen name='Home' component={HomeScreen} />
<Stack.Screen name='Details' component={DetailsScreen} />
</Stack.Navigator>Creating Simple Screen Components
Each screen registered in the navigator is a normal React component. React Navigation automatically injects navigation and route props into every registered screen component. You can use these props to navigate or read route parameters.
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
function DetailsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}Putting It All Together
Combining NavigationContainer, the stack navigator, and your screen components gives you a working two-screen app. The first screen registered becomes the visible screen on startup. React Navigation handles the back button and navigation header automatically.
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name='Home' component={HomeScreen} />
<Stack.Screen name='Details' component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}Customizing the Header Title
Each Stack.Screen accepts an options prop where you can customize the header. Set title to override the default screen name displayed in the navigation bar. You can also set headerShown: false to hide the header entirely.
<Stack.Screen
name='Home'
component={HomeScreen}
options={{ title: 'My Home Page' }}
/>Screen Options on the Navigator
Set screenOptions on the Stack.Navigator to apply default options to all screens. Individual screen options override the navigator defaults. This avoids repeating common settings like headerStyle or headerTintColor on every screen.
<Stack.Navigator
screenOptions={{
headerStyle: { backgroundColor: '#6200ee' },
headerTintColor: '#fff',
headerTitleStyle: { fontWeight: 'bold' },
}}
>
<Stack.Screen name='Home' component={HomeScreen} />
<Stack.Screen name='Details' component={DetailsScreen} />
</Stack.Navigator>Verifying Your Setup
Run npx expo start and open the app. You should see the Home screen with a navigation header. On iOS, the back button appears automatically when you navigate to Details. On Android, the hardware back button is handled by React Navigation. If the app crashes, double-check that react-native-screens and react-native-safe-area-context are installed.
Quick Check
Test your understanding of React Navigation setup concepts from this lesson.
Lesson Recap
In this lesson you learned: install the React Navigation core and native-stack packages, wrap your app in NavigationContainer, and define screens inside Stack.Navigator with Stack.Screen. Next up we explore navigating between screens and passing parameters.
Questions Fréquemment Posées
La leçon « Installer et configurer React Navigation » est-elle gratuite ?
Oui — le texte complet de « Installer et configurer React Navigation » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Native Academy, passe à CoddyKit PRO. Le cours React Native Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Installer et configurer React Navigation » ?
Installez React Navigation et ses dépendances, enveloppez l’application dans un NavigationContainer et configurez votre premier navigateur en pile avec deux écrans. Tu pratiques React Native Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Native Academy ?
Aucune expérience préalable n'est requise. React Native Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Installer et configurer React Navigation » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Native Academy ?
Oui. Chaque leçon React Native Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Installer et configurer React Navigation
- Naviguer entre les écrans et transmettre des paramètres
- Navigateur à onglets inférieurs
- Navigateur en tiroir et navigateurs imbriqués