React Native -右上方标题按钮的导航

Question

我的应用程序(FeedScreen)的屏幕有一个右上角的标题按钮。我想让这个按钮在按下时导航到另一个屏幕。

这是我的代码:

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>
</>
);
}

不幸的是，它返回"Undefined不是一个对象(求值'navigation.navigate')"

Answer 1

你可以把一个函数传递给options，它接收一个带有route和navigation属性的对象。

<Stack.Screen
name="FeedScreen"
component={FeedScreen}
options={({ route, navigation }) => ({
title: "My screen",
headerStyle: {
backgroundColor: "#262423"
},
headerTintColor: "#fff",
headerTitleStyle: {
fontWeight: "bold"
},
headerRight: () => (
<Button
onPress={() => navigation.navigate("UploadPictureScreen")}
title="+"
color="#fff"
/>
)
})}
/>