错误：找不到导航对象。您的组件位于 NavigationContainer 内吗？ （如何在导航容器内使用useNavigation）

Question

我正在编写一个反应本机 MERN 聊天应用程序，并且我正在添加一个个人资料页面，以便用户可以编辑或添加他的数据。 我想通过按钮并使用 useNavigation 访问此页面，但出现我在标题中提到的错误 注意：该按钮位于导航容器内 我的代码：

import React from 'react';
import storage from './storage';
import { useNavigation } from '@react-navigation/native'
import { NavigationContainer, Screen } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { LogBox, ActivityIndicator, Button, TouchableOpacity, View } from 'react-native';
import { Menu, MenuItem, MenuDivider } from 'react-native-material-menu';
import Icon from 'react-native-vector-icons/Entypo';
import ProfileScreen from './Profile.Screen';
//rest of the imports...

export default function App() {
  const [savedData, setSavedData] = React.useState(null)
  const [fetching, setFetching] = React.useState(false)
  const [receiver, setReceiver] = React.useState(null)
  const [visible, setVisible] = React.useState(false);

  const navigation = useNavigation();

  //rest of the code...

  return (
    <ThemeProvider>
      <NavigationContainer>
        <Stack.Navigator>
          {isSignedIn && <>
            <Stack.Screen name="Home" component={ChatList} initialParams={params} options={() =>    ({
              title: "myApp", headerRight:
                () => (
                  <View style={{ marginRight: 3 }}>
                    <Menu
                      visible={visible}
                      anchor={
                        <Icon
                          name="dots-three-vertical"
                          size={20}
                          color="black"
                          onPress={() => setVisible(true)}
                        />
                      }
                      onRequestClose={() => setVisible(false)}
                    >
                      <MenuItem onPress={navigation.navigate('Profile')}>My Profile</MenuItem> {/* this is the line*/}
                      <MenuItem onPress={changeTheme}>Change Theme</MenuItem>
                      <MenuItem onPress={() => handleLogout(user)}>Log Out</MenuItem>
                    </Menu>
                  </View>
                )
            })} />
            <Stack.Screen name="Chat" component={Chat} initialParams={params} options={() => ({ title: receiver })} />
            <Stack.Screen name="Users" component={UsersScreen} initialParams={params} />
            <Stack.Screen name="Profile" component={ProfileScreen} initialParams={params} options={{ title: 'My Profile' }} />
          </>}

          {!isSignedIn && <>
            <Stack.Screen name="SignIn" component={SignInScreen} initialParams={{ onSignIn }} options={() => ({ title: "myApp" })} />
            <Stack.Screen name="ForgotPassword" component={ForgetPassword} />
          </>}


        </Stack.Navigator>
      </NavigationContainer>
    </ThemeProvider>
  )

}

我尝试删除引号（我在某个地方将其视为解决方案）（而不是

navigation.navigate('Profile')

我用了

navigation.navigate(Profile)

我尝试删除 onPress 函数，但仍然收到错误

const navigation = useNavigation()

我尝试在 NavigationContainer 旁边导入 useNavigation 但没有任何效果

我知道如果没有菜单，这会起作用，我怎样才能用菜单做到这一点 （注意：我知道它应该被 navigationContainer 包装，但我不知道如何）

Answer 1

您似乎错过了线路

const Stack = createNativeStackNavigator();

也不需要

 const navigation = useNavigation();

你可以在选项回调中获取它

<Stack.Screen name="Home" component={ChatList} initialParams={params}         options={(navigation) =>    ({ title: "myApp", headerRight: // rest of your code