Una pantalla de mi aplicación (FeedScreen) tiene un botón de encabezado en la parte superior derecha. Quiero que ese botón navegue a otra pantalla al presionarlo.

Este es mi código:

 const Stack = createNativeStackNavigator(); function App({ navigation }) { return ( <> <StatusBar hidden /> <NavigationContainer> <Stack.Navigator initialRouteName="Home"> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Login" component={LoginScreen} /> <Stack.Screen name="Signup" component={SignupScreen} /> <Stack.Screen name="TestScreen" component={TestScreen} /> <Stack.Screen name="CarouselScreen" component={CarouselScreen} /> <Stack.Screen name="SettingsScreen" component={SettingsScreen} /> <Stack.Screen name="InsertNumberScreen" component={InsertNumberScreen} /> <Stack.Screen name="FeedScreen" component={FeedScreen} options={{ title: 'My screen', headerStyle: { backgroundColor: '#262423', }, headerTintColor: '#fff', headerTitleStyle: { fontWeight: 'bold', }, headerRight: () => ( <Button onPress={() => navigation.navigate('UploadPictureScreen')} title="+" color="#fff" /> ), }} /> <Stack.Screen name="UploadPictureScreen" component={UploadPictureScreen} options={{ title: 'Upload a picture', headerStyle: { backgroundColor: '#262423', }, headerTintColor: '#fff', headerTitleStyle: { fontWeight: 'bold', }, }} /> </Stack.Navigator> </NavigationContainer> </> ); }

Desafortunadamente, devuelve "Undefined no es un objeto (evaluando 'navigation.navigate')".