无法解析“../SecondApp\\node_modules\\react-navigation-stack\\lib\\module\\navigators”中的“react-navigation”

Question

我正在尝试从 Netninja 的教程中构建一个 React Native 应用程序，但是我遇到了这个错误，尝试了几件事，还有一些我在 Stackoverflow 上找到的东西。 但到目前为止，没有什么可以解决它。 我应该怎么做才能解决它？

这是错误：

编译失败。 ../SecondApp/node_modules/react-navigation-stack/lib/module/navigators/createStackNavigator.js 找不到模块：无法解析“../SecondApp\\node_modules\\react-navigation-stack\\”中的“react-navigation”库\\模块\\导航器'

这是代码：

应用程序.js：

import { StatusBar } from "expo-status-bar";
import React from "react";
import "react-native-gesture-handler";
import { StyleSheet, Text, View } from "react-native";
import Navigator from "./routes/homeStack";
import { AppLoading } from "expo";
import {
  useFonts,
  Nunito_700Bold_Italic,
  Nunito_300Light,
} from "@expo-google-fonts/nunito";
import About from "./screens/about";

export default function App() {
  let [fontsLoaded, error] = useFonts({
    Nunito_700Bold_Italic,
    Nunito_300Light,
  });

  if (fontsLoaded) {
    return <Navigator />;
  } else {
    return <AppLoading />;
  }

  return (
    <View style={styles.container}>
      <Text style={{ fontsize: 24 }}>Make sure to subscribe!</Text>
      <Text style={{ fontFamily: "Nunito_700Bold_Italic", fontsize: 70 }}>
        {" "}
        Make sure to subscribe!
      </Text>
      <Text style={{ fontFamily: "Nunito_300Light", fontsize: 60 }}>
        Make sure
      </Text>
      <Home />
      <About />
      <ReviewDetails />

      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#eaeaea",
    alignItems: "center",
    justifyContent: "center",
  },
});

HomeStack.js：

import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
import ReviewDetails from "../screens/reviewDetails";
import Home from "../screens/home";

const screens = {
  Home: {
    screen: Home,
  },
  ReviewDetails: {
    screen: ReviewDetails,
  },
};

const HomeStack = createStackNavigator(screens);

export default createAppContainer(HomeStack);

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": {
    "@expo-google-fonts/inter": "^0.1.0",
    "@expo-google-fonts/lato": "^0.1.0",
    "@expo-google-fonts/nunito": "^0.1.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/native": "^5.7.5",
    "expo": "~38.0.8",
    "expo-font": "~8.2.1",
    "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",
    "react-navigation-stack": "^2.8.4"
  },
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "babel-preset-expo": "~8.1.0"
  },
  "private": true
}

Answer 1

您的反应导航堆栈相关依赖项与您的主要反应导航依赖项不兼容。

正确依赖的示例：

"@react-navigation/native": "^5.7.3",
"@react-navigation/stack": "^5.9.0",