ReferenceError：属性“NavigationContainer”不存在

Question

我正在使用 React Native 制作一个应用程序，其中有一个欢迎屏幕，可以带您进入登录或注册页面，为此我正在使用 @react-navigation 库，但我似乎在运行时遇到错误应用程序，因为我在 App.js 中设置了堆栈导航代码，它建立了所有屏幕。

这是错误：

ReferenceError: Property 'NavigationContainer' doesn't exist

但这对我来说并没有什么意义，因为我已经下载了所有必需的软件包，并且 IDE 本身没有显示编译错误，确认了库的存在

这是 App.js 代码，错误来自：

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import WelcomeScreen from './WelcomeScreen';
import Login from './Login';
import SignUp from './SignUp';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Welcome"
          component={WelcomeScreen}
          options={{title: 'Welcome'}}
        />
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="SignUp" component={SignUp} />
      </Stack.Navigator>
    </NavigationContainer>
       );
    };

这是实际的错误屏幕：

我对这部分很困惑，所以如果有什么可以帮助请分享

谢谢！

Answer 1

也许您的

package.json

文件中有错误。确保此文件中至少列出了这些依赖项：

"dependencies": {
    "@react-navigation/native": "^6.1.6",
    "react-native": "0.71.8",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",
  },

如果缺少其中一个依赖项，请使用关联的 npm 命令安装它们！

Answer 2

看起来您正在 WelcomeScreen 组件中调用 NavigationContainer。删除该调用，因为您只需要在应用程序的根目录中使用它们。