React Native - 右上角的导航 header 按钮

Question

我的应用程序 (FeedScreen) 的屏幕有一个 top-right header 按钮。我希望该按钮在按下时导航到另一个屏幕。

这是我的代码：

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

不幸的是，returns“未定义不是 object（正在评估 'navigation.navigate'）”。

Answer 1

我认为这应该可行，如果不行请告诉我


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

React Native - 右上角的导航 header 按钮

React Native - navigation on top right header button

javascript

mobile

react-native