我试图设置一个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";