无法从"App.js"解析"@react-navigation/native" - React Native + 如何解决？

Question

无法解析模块@react-navigation/native，出现在App.js中：项目中找不到@react-navigation/native。

如果您确定该模块存在，请尝试以下步骤：

 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules: rm -rf node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
- node_modules\react-native\Libraries\Utilities\HMRClient.js:307:41 in showCompileError
- node_modules\react-native\Libraries\Utilities\HMRClient.js:228:26 in client.on$argument_1
- node_modules\eventemitter3\index.js:181:39 in emit
- node_modules\metro\src\lib\bundle-modules\WebSocketHMRClient.js:80:20 in _ws.onmessage
- node_modules\event-target-shim\dist\event-target-shim.js:818:39 in EventTarget.prototype.dispatchEvent
- node_modules\react-native\Libraries\WebSocket\WebSocket.js:232:27 in _eventEmitter.addListener$argument_1
- node_modules\react-native\Libraries\vendor\emitter\EventEmitter.js:190:12 in emit
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:436:47 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:26 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:384:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue

Unable to resolve "@react-navigation/native" from "App.js"
Failed building JavaScript bundle.
Unable to resolve "@react-navigation/native" from "App.js"
Failed building JavaScript bundle.
Unable to resolve "@react-navigation/native" from "App.js"
Failed building JavaScript bundle.
> Unable to resolve "@react-navigation/native" from "App.js"
Unable to resolve "@react-navigation/native" from "App.js"
Failed building JavaScript bundle.
Error: Can't find react-native in package.json dependencies
Error: Can't find react-native in package.json dependencies

请帮助我。 电子邮件地址：[e-mail]

- Sounak Roy

---

你按照这个入门指南中给出的所有步骤进行了吗？ https://reactnavigation.org/docs/getting-started/ - Hisham Mubarak

如果您已经在运行该应用程序的同时安装了依赖项，则必须重新启动它。 - Thulfiqar

Answer 1

npm install @react-navigation/native

如果使用 Expo：

expo 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

- devELIOper

---

为什么我们需要所有这些依赖关系？ - Operator

在运行这些命令后，也请重新启动服务器 ;) - Eklavya Chandra

Answer 2

这个错误的原因是你没有安装react-navigation。

运行：

npm install react-navigation
npm start -- --reset-cache

- user13142973

Answer 3

最佳解决方案是删除您的node_modules和package-lock.json文件，然后尝试npm install命令。这对我起了作用。

- Virinchi Manepalli

---

这似乎很直观，但它可行。 - Obonyo

Answer 4

尝试将以下行添加到您的metro.config.js文件中：

sourceExts: ['jsx', 'js', 'ts', 'tsx', 'json'],

- hiriski

Answer 5

我已经通过重新安装/更新这些软件包来解决了这个问题。

npm install --save react-native-gesture-handler react-native-reanimated react-native-screens

这个技巧可以解决问题：

npm start -- --reset-cache

但是以下操作也能成功：

删除

node_modules和package-lock.json 从手机中删除app

run npm start -- --reset-cache
run app

- Abubakr Elghazawy

Answer 6

此外，如果您使用Expo，请重新启动应用并运行npm run...以启动新的服务器。

- AnatuGreen

Answer 7

由于缓存过期导致的错误。为了解决这个问题， 运行： npm start -c //如果您使用的是expo

如果您没有使用expo， 运行： npx react-native start --reset-cache

- Jaycn

Answer 8

当我在寻找解决方案时，我遇到了这个问题，因为我有一个类似的问题。您可以在文档中使用yarn命令，而不是npm。

如果问题仍然存在，请更改。

import { NavigationContainer } from '@react-navigation/native';

to:

import { NavigationContainer } from './node_modules/@react-navigation/native;

我之前使用了 yarn 命令进行了更改。

在运行构建时，请使用：

npx react-native start

- Valentine Ifeanyi

Answer 9

我一整天都卡在同一个问题上，最后删除了packagelock.json和node模块文件夹，然后尝试重置缓存，再运行npm start，最后运行npx react-native run-android。现在所有文件都将被重新构建，您的导航容器应该可以正常工作。

- Hashir