Navigazione tra schermate e passaggio dei parametri
Utilizzi navigation.navigate per spostarsi tra le schermate, passi i parametri come secondo argomento e li legga con route.params nella schermata di destinazione.
Navigazione tra schermate e passaggio dei parametri è una lezione React Native Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Native Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Native Academy include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
The navigation Prop in Screens
Every component registered as a screen in a React Navigation navigator automatically receives a navigation prop. This object provides methods to move between screens, go back, and manage the navigation stack. You can also access it in nested components using the useNavigation hook.
function HomeScreen({ navigation }) {
// navigation.navigate, navigation.goBack, etc.
return <View />;
}Navigating with navigation.navigate
Call navigation.navigate('ScreenName') to move to another screen. If the screen is already in the stack and you navigate to it again, React Navigation will go to the existing instance rather than adding a duplicate. Use navigation.push('ScreenName') to always push a new instance.
function HomeScreen({ navigation }) {
return (
<Button
title='Go to Details'
onPress={() => navigation.navigate('Details')}
/>
);
}Going Back with navigation.goBack
Call navigation.goBack() to pop the current screen off the stack and return to the previous one. On iOS the swipe-back gesture is enabled by default. On Android, the hardware back button calls goBack automatically. Use navigation.popToTop() to jump all the way back to the first screen.
function DetailsScreen({ navigation }) {
return (
<Button
title='Go Back'
onPress={() => navigation.goBack()}
/>
);
}Passing Params When Navigating
Pass a second argument to navigation.navigate to send parameters to the destination screen. The params object can contain any serializable data — IDs, strings, booleans. Avoid passing complex non-serializable objects like class instances or functions.
function HomeScreen({ navigation }) {
return (
<Button
title='View Post'
onPress={() =>
navigation.navigate('Details', {
postId: 42,
title: 'React Navigation Deep Dive',
})
}
/>
);
}Reading Params with route.params
The destination screen receives a route prop alongside the navigation prop. Access the parameters you passed via route.params. Always provide defaults in case a screen is opened without params, for example when it is the initial screen.
function DetailsScreen({ route, navigation }) {
const { postId, title } = route.params ?? {};
return (
<View>
<Text>Post ID: {postId}</Text>
<Text>Title: {title}</Text>
</View>
);
}Default Params on Stack.Screen
Set initialParams on a Stack.Screen to provide default parameter values. These defaults merge with any params passed at runtime, so the screen always has a complete set of values to work with, even when opened as the initial route.
<Stack.Screen
name='Details'
component={DetailsScreen}
initialParams={{ postId: 0, title: 'Unknown' }}
/>Updating Params from a Screen
A screen can update its own params using navigation.setParams. This is useful when an action on the current screen (like editing a form field) should be reflected in the navigation header title. The params update triggers a re-render of the screen.
function DetailsScreen({ route, navigation }) {
const { title } = route.params;
return (
<Button
title='Update Title'
onPress={() => navigation.setParams({ title: 'Updated Title' })}
/>
);
}Using useNavigation Hook
Deep child components that are not registered screens do not receive the navigation prop automatically. Use the useNavigation() hook from React Navigation to access the navigation object anywhere inside the navigator tree without prop drilling.
import { useNavigation } from '@react-navigation/native';
function MyButton() {
const navigation = useNavigation();
return (
<Button
title='Go to Profile'
onPress={() => navigation.navigate('Profile')}
/>
);
}Using useRoute Hook
Similarly, use the useRoute() hook to access route.params in a non-screen component. This is useful when you have a deeply nested component that needs to read the current screen's parameters without threading the route prop through every level.
import { useRoute } from '@react-navigation/native';
function PostHeader() {
const route = useRoute();
const { title } = route.params ?? {};
return <Text style={{ fontWeight: 'bold' }}>{title}</Text>;
}Setting the Header Title from Params
You can dynamically set the navigation header title based on route params by passing a function to the options prop. The function receives the route object, allowing you to use param values as the screen title without extra state.
<Stack.Screen
name='Details'
component={DetailsScreen}
options={({ route }) => ({ title: route.params.title ?? 'Details' })}
/>Navigating Back and Sending Data Back
To send data from a child screen back to its parent, use navigation.navigate with the parent screen's name and include the return data as params. The parent screen will receive the updated params. Alternatively, pass a callback function as a param to the child screen and call it before going back.
// In child screen
navigation.navigate('Home', { selectedItem: 'apple' });
// In parent screen — read route.params.selectedItemQuick Check
Test your understanding of React Navigation screen navigation and params from this lesson.
Lesson Recap
In this lesson you learned: use navigation.navigate to move to another screen, pass params as the second argument to navigate, and read params with route.params in the destination screen. Next up we explore the Bottom Tab Navigator.
Impara JavaScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «Navigazione tra schermate e passaggio dei parametri» è gratuita?
Sì — il testo completo di «Navigazione tra schermate e passaggio dei parametri» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Native Academy, passa a CoddyKit PRO. Il corso React Native Academy include 4 lezioni in totale.
Cosa imparerò in «Navigazione tra schermate e passaggio dei parametri»?
Utilizzi navigation.navigate per spostarsi tra le schermate, passi i parametri come secondo argomento e li legga con route.params nella schermata di destinazione. Eserciti React Native Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare React Native Academy?
Non è richiesta alcuna esperienza precedente. React Native Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Navigazione tra schermate e passaggio dei parametri»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione React Native Academy?
Sì. Ogni lezione React Native Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Installazione e configurazione di React Navigation
- Navigazione tra schermate e passaggio dei parametri
- Bottom tab navigator
- Drawer navigator e navigator annidati