找不到模块:无法解析'@react-navigation/stack'反应本机



我试图设置一个react原生项目,在该项目中,我只尝试在app.js中使用包react导航创建堆栈导航器,我遵循本指南https://reactnavigation.org/docs/getting-started然后进入https://reactnavigation.org/docs/hello-react-navigation但是我收到错误

编译失败。D:/Visual Studio Code/Resturant Review/food/App.js找不到模块:无法解析"D:\Visual Studio Code\Resturant Review\food"中的"@react navigation/stack"这是我的代码:

//app.js
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
function HomeScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
/// package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@react-native-community/masked-view": "0.1.10",
"@react-navigation/native": "^5.7.3",
"expo": "~38.0.8",
"expo-status-bar": "^1.0.2",
"react": "~16.11.0",
"react-dom": "~16.11.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
"react-native-gesture-handler": "~1.6.0",
"react-native-reanimated": "~1.9.0",
"react-native-safe-area-context": "~3.0.7",
"react-native-screens": "~2.9.0",
"react-native-web": "~0.11.7"
},
"devDependencies": {
"@babel/core": "^7.8.6",
"babel-preset-expo": "~8.1.0"
},
"private": true
}

请注意,我尝试过npm install,重新启动项目,删除和安装,以及我在网上找到的所有建议,但都不起作用。

非常感谢你的帮助!。

基本上,如果运行npm install,它会尝试从package.json中获取要安装的依赖项。但问题是@react-navigation/stack不存在。

您需要安装该依赖项才能使用。因此,尝试按照以下方式安装该模块:

npm install @react-navigation/stack

您似乎没有安装此软件包在使用nodejs项目时,请确保安装了所有需要的包,在那里你只需要安装@react navigation/stack,所以只需运行

$ npm i --save @react-navigation/stack

保存选项不是必需的,但如果您在不同的RN项目中需要相同的包,则该选项很重要希望它能帮助

使用此

npm i react-navigation-stack

我也面临这个问题,但在基本上执行了两个步骤后,问题得到了解决:(

1.使用命令提示符安装react导航堆栈

project_directory_pathAwesomeProject>npm install @react-navigation/stack

有时我们会得到一个错误";无法解析手势处理程序/安全区域上下文";因此,首先我们需要添加一些其他依赖项

->npm安装react原生手势处理程序react原生重新激活的react原生屏幕react原生安全区域上下文@react原生社区/屏蔽视图

现在点击您的命令运行设备上的构建

project_directory_pathAwesomeProject>npx react-native run-android

如果您仍然有错误,下面是答案。

将此和过去复制到VS代码终端中。

npm install @react-navigation/native
npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install @react-navigation/stack

您必须导入这样的模块:

import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";

最新更新