React Native Academy · Les

Navigeren tussen schermen en params doorgeven

Gebruik navigation.navigate om tussen schermen te navigeren, geef parameters door in het tweede argument en lees ze op het doelscherm met route.params.

Les 2 van 413 stappen

Navigeren tussen schermen en params doorgeven is een gratis React Native Academy-les op CoddyKit. Dit is les 2 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.

De prop navigation in schermen

Elke component die als scherm in een React Navigation-navigator is geregistreerd, ontvangt automatisch een prop navigation. Dit object biedt methoden om tussen schermen te navigeren, terug te gaan en de navigatiestack te beheren. Je kunt er ook in geneste componenten bij met de hook useNavigation.

function HomeScreen({ navigation }) {
  // navigation.navigate, navigation.goBack, etc.
  return <View />;
}

Navigeren met navigation.navigate

Roep navigation.navigate('ScreenName') aan om naar een ander scherm te gaan. Als het scherm al in de stack staat en je er opnieuw naartoe navigeert, gaat React Navigation naar de bestaande instantie in plaats van een duplicaat toe te voegen. Gebruik navigation.push('ScreenName') om altijd een nieuwe instantie toe te voegen.

function HomeScreen({ navigation }) {
  return (
    <Button
      title='Go to Details'
      onPress={() => navigation.navigate('Details')}
    />
  );
}

Teruggaan met navigation.goBack

Roep navigation.goBack() aan om het huidige scherm van de stack te verwijderen en terug te keren naar het vorige scherm. Op iOS is het veeggebaar om terug te gaan standaard ingeschakeld. Op Android roept de hardwarematige terugknop automatisch goBack aan. Gebruik navigation.popToTop() om helemaal terug te gaan naar het eerste scherm.

function DetailsScreen({ navigation }) {
  return (
    <Button
      title='Go Back'
      onPress={() => navigation.goBack()}
    />
  );
}

Parameters doorgeven tijdens het navigeren

Geef een tweede argument door aan navigation.navigate om parameters naar het doelscherm te sturen. Het parameterobject kan alle serialiseerbare gegevens bevatten, zoals ID's, tekenreeksen en booleans. Geef geen complexe, niet-serialiseerbare objecten door, zoals instanties van klassen of functies.

function HomeScreen({ navigation }) {
  return (
    <Button
      title='View Post'
      onPress={() =>
        navigation.navigate('Details', {
          postId: 42,
          title: 'React Navigation Deep Dive',
        })
      }
    />
  );
}

Parameters lezen met route.params

Het doelscherm ontvangt naast de navigation-prop ook een route-prop. Open de parameters die je hebt doorgegeven via route.params. Geef altijd standaardwaarden op voor het geval een scherm zonder parameters wordt geopend, bijvoorbeeld wanneer het het beginscherm is.

function DetailsScreen({ route, navigation }) {
  const { postId, title } = route.params ?? {};
  return (
    <View>
      <Text>Post ID: {postId}</Text>
      <Text>Title: {title}</Text>
    </View>
  );
}

Standaardparameters op Stack.Screen

Stel initialParams in op een Stack.Screen om standaardparameterwaarden op te geven. Deze standaardwaarden worden samengevoegd met parameters die tijdens runtime zijn doorgegeven. Zo beschikt het scherm altijd over een volledige set waarden, ook wanneer het als de initiële route wordt geopend.

<Stack.Screen
  name='Details'
  component={DetailsScreen}
  initialParams={{ postId: 0, title: 'Unknown' }}
/>

Parameters vanuit een scherm bijwerken

Een scherm kan zijn eigen parameters bijwerken met navigation.setParams. Dit is handig wanneer een actie op het huidige scherm, zoals het bewerken van een formulierveld, moet worden weergegeven in de titel van de navigatiekop. Door de bijgewerkte parameters wordt het scherm opnieuw gerenderd.

function DetailsScreen({ route, navigation }) {
  const { title } = route.params;

  return (
    <Button
      title='Update Title'
      onPress={() => navigation.setParams({ title: 'Updated Title' })}
    />
  );
}

De hook useNavigation gebruiken

Diep geneste childcomponenten die niet als scherm zijn geregistreerd, ontvangen de navigation-prop niet automatisch. Gebruik de hook useNavigation() van React Navigation om overal binnen de navigatiestructuur toegang te krijgen tot het navigation-object, zonder props door elke componentlaag te moeten doorgeven.

import { useNavigation } from '@react-navigation/native';

function MyButton() {
  const navigation = useNavigation();
  return (
    <Button
      title='Go to Profile'
      onPress={() => navigation.navigate('Profile')}
    />
  );
}

De hook useRoute gebruiken

Gebruik op vergelijkbare wijze de hook useRoute() om in een niet-schermcomponent toegang te krijgen tot route.params. Dit is handig wanneer je een diep geneste component hebt die de parameters van het huidige scherm moet lezen zonder de route-prop door elke laag te moeten doorgeven.

import { useRoute } from '@react-navigation/native';

function PostHeader() {
  const route = useRoute();
  const { title } = route.params ?? {};
  return <Text style={{ fontWeight: 'bold' }}>{title}</Text>;
}

De titel van de navigatiekop instellen vanuit parameters

Je kunt de titel van de navigatiekop dynamisch instellen op basis van routeparameters door een functie door te geven aan de prop options. De functie ontvangt het object route, zodat je parameterwaarden als schermtitel kunt gebruiken zonder extra state.

<Stack.Screen
  name='Details'
  component={DetailsScreen}
  options={({ route }) => ({ title: route.params.title ?? 'Details' })}
/>

Terug navigeren en gegevens terugsturen

Gebruik navigation.navigate met de naam van het bovenliggende scherm om gegevens vanuit een childscherm terug te sturen, en voeg de teruggestuurde gegevens als parameters toe. Het bovenliggende scherm ontvangt de bijgewerkte parameters. Je kunt ook een callbackfunctie als parameter aan het childscherm doorgeven en die aanroepen voordat je teruggaat.

// In child screen
navigation.navigate('Home', { selectedItem: 'apple' });

// In parent screen — read route.params.selectedItem

Korte controle

Test je begrip van schermnavigatie en parameters in React Navigation uit deze les.

Beantwoord dit in de interactieve les

Samenvatting van de les

In deze les heb je geleerd hoe je navigation.navigate gebruikt om naar een ander scherm te gaan, hoe je parameters als tweede argument aan navigate doorgeeft en hoe je parameters met route.params in het doelscherm leest. Hierna bekijken we de Bottom Tab Navigator.

Gratis beginnen

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

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Navigeren tussen schermen en params doorgeven” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad React Native Academy, waaronder “Navigeren tussen schermen en params doorgeven”, 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 “Navigeren tussen schermen en params doorgeven”?

Gebruik navigation.navigate om tussen schermen te navigeren, geef parameters door in het tweede argument en lees ze op het doelscherm met route.params. 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 2 van 4.

Hoe lang duurt de les “Navigeren tussen schermen en params doorgeven”?

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

← Terug naar React Native Academy