React Navigation installeren en configureren
Installeer React Navigation en de bijbehorende dependencies, wikkel de app in een NavigationContainer en stel uw eerste stack navigator met twee schermen in.
React Navigation installeren en configureren is een gratis React Native Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject React Native Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus React Native Academy bevat in totaal 4 lessen.
Wat is React Navigation?
React Navigation is de populairste bibliotheek voor het afhandelen van navigatie in React Native-apps. De bibliotheek biedt verschillende navigators — Stack, Tab en Drawer — waarmee je tussen schermen kunt navigeren, gegevens kunt doorgeven en de navigatiegeschiedenis kunt beheren. React Navigation is gebaseerd op JavaScript en werkt naadloos met Expo- en kale React Native-projecten.
Kernafhankelijkheden installeren
React Navigation vereist het kernpakket plus een aantal native afhankelijkheden. Voer de installatieopdracht uit en installeer daarna de native stack en de vereiste bibliotheken voor gebaren en animaties.
npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-contextDe native stacknavigator installeren
De native stacknavigator uit @react-navigation/native-stack gebruikt native navigatiecomponenten van iOS en Android. Daardoor krijg je betere prestaties en een meer native ervaring dan met de stack die alleen JavaScript gebruikt. Installeer deze naast het kernpakket.
npm install @react-navigation/native-stackApp omwikkelen met NavigationContainer
Elke configuratie van React Navigation vereist dat NavigationContainer de buitenste wrapper van je app is. Deze beheert de navigatiestructuur, handelt de terugknop op Android af en biedt navigatiecontext aan alle onderliggende componenten. Omwikkel je volledige app ermee in App.js.
import { NavigationContainer } from '@react-navigation/native';
export default function App() {
return (
<NavigationContainer>
{/* navigator goes here */}
</NavigationContainer>
);
}Een stacknavigator maken
Gebruik createNativeStackNavigator() om een stacknavigator te maken. De functie retourneert een component Navigator en een component Screen. Plaats Stack.Screen-componenten binnen Stack.Navigator om je schermen te registreren.
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>
);
}De prop initialRouteName
Standaard is het eerste scherm in Stack.Navigator het beginscherm. Je kunt expliciet instellen welk scherm als eerste verschijnt met de prop initialRouteName op Stack.Navigator. De waarde moet overeenkomen met de name van een van de onderliggende Stack.Screen-componenten.
<Stack.Navigator initialRouteName='Details'>
<Stack.Screen name='Home' component={HomeScreen} />
<Stack.Screen name='Details' component={DetailsScreen} />
</Stack.Navigator>Eenvoudige schermcomponenten maken
Elk scherm dat in de navigator is geregistreerd, is een normale React-component. React Navigation voegt automatisch de props navigation en route toe aan elke geregistreerde schermcomponent. Je kunt deze props gebruiken om te navigeren of routeparameters te lezen.
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>
);
}Alles samenvoegen
Door NavigationContainer, de stacknavigator en je schermcomponenten te combineren, krijg je een werkende app met twee schermen. Het eerste geregistreerde scherm wordt bij het opstarten zichtbaar. React Navigation handelt de terugknop en de navigatiekop automatisch af.
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>
);
}De titel van de navigatiekop aanpassen
Elke Stack.Screen accepteert een prop options waarmee je de navigatiekop kunt aanpassen. Stel title in om de standaardnaam van het scherm in de navigatiebalk te overschrijven. Je kunt ook headerShown: false instellen om de navigatiekop volledig te verbergen.
<Stack.Screen
name='Home'
component={HomeScreen}
options={{ title: 'My Home Page' }}
/>Schermopties op de navigator
Stel screenOptions in op Stack.Navigator om standaardopties op alle schermen toe te passen. De afzonderlijke options van een scherm overschrijven de standaardinstellingen van de navigator. Zo hoef je algemene instellingen zoals headerStyle of headerTintColor niet op elk scherm te herhalen.
<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>Je configuratie controleren
Voer npx expo start uit en open de app. Je zou het Home-scherm met een navigatiekop moeten zien. Op iOS verschijnt de terugknop automatisch wanneer je naar Details navigeert. Op Android wordt de hardwarematige terugknop door React Navigation afgehandeld. Als de app crasht, controleer dan of react-native-screens en react-native-safe-area-context zijn geïnstalleerd.
Korte controle
Test je begrip van de concepten voor het instellen van React Navigation uit deze les.
Samenvatting van de les
In deze les heb je geleerd hoe je de kernpakketten en native-stackpakketten van React Navigation installeert, hoe je je app omwikkelt met NavigationContainer en hoe je schermen definieert binnen Stack.Navigator met Stack.Screen. Hierna bekijken we hoe je tussen schermen navigeert en parameters doorgeeft.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “React Navigation installeren en configureren” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “React Navigation installeren en configureren”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus React Native Academy bevat in totaal 4 lessen.
Wat leer ik in “React Navigation installeren en configureren”?
Installeer React Navigation en de bijbehorende dependencies, wikkel de app in een NavigationContainer en stel uw eerste stack navigator met twee schermen in. Je oefent met React Native Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met React Native Academy te beginnen?
Ervaring vooraf is niet nodig. React Native Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “React Navigation installeren en configureren”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over React Native Academy?
Ja. Elke les over React Native Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- React Navigation installeren en configureren
- Navigeren tussen schermen en params doorgeven
- Bottom-tabnavigator
- Drawernavigator en geneste navigators