React Native - 在右上角的标题按钮上导航答案

【问题标题】：React Native - navigation on top right header buttonReact Native - 在右上角的标题按钮上导航
【发布时间】：2023-02-06 00:26:43
【问题描述】：

我的应用程序 (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 is not an object (evaluating 'navigation.navigate')”。

【问题讨论】：

标签： javascript react-native mobile

【解决方案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"
                />
              )
            })}
          />

【讨论】：