无法解析模块“react-native-screen”答案

【问题标题】：Unable to resolve module 'react-native-screen'无法解析模块“react-native-screen”
【发布时间】：2020-04-15 19:52:34
【问题描述】：

我从 Atom 上的 React Native 收到此错误：

无法解析模块“react-native-screen”

这是我的步骤：

我跑了npm install --save react-navigation，结果如下：

然后我跑了npm install：

然后，当我运行我的应用程序时，我得到一个错误：

无法从“node_modules\react-navigation-stack\lib\module\views\StackView\StackViewCard.js”解析“react-native-screens”
构建 JavaScript 包失败。

【问题讨论】：

标签： react-native navigation screen

【解决方案1】：

您需要再安装 3 个库 react-native-gesture-handler、react-native-reanimated 和 react-native-screens。

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

参考：https://reactnavigation.org/docs/en/getting-started.html#installing-dependencies-into-a-bare-react-native-project

【讨论】：

我也必须这样做：rm -rf ./node_modules 和 yarn cache clean。

【解决方案2】：

使用以下步骤，这将 100% 有效。

安装 React Navigation

npm install react-navigation

安装依赖项

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

安装 React 导航堆栈

npm install react-navigation-stack @react-native-community/masked-view

使用 npm start -c 启动应用并清除缓存

更新导入

imports  will  look like this:
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

错误？如果您仍然看到有关软件包的错误和投诉，请执行以下操作：

rm -r node_modules
rm package-lock.json
expo upgrade
npm start -c

【讨论】：

【解决方案3】：

如果你已经下载了 react-navigation，那么如果没有 react-native-gesture-handler ,react-native-reanimated, react-native-screens 的支持库，它将无法工作

你可以通过 yarn 或 npm 下载它。

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

或

yarn add react-native-gesture-handler react-native-reanimated react-native-screens

希望对您有所帮助。如有疑问，请随意

【讨论】：

【解决方案4】：

如果您将 expo 用于 react-native 项目，那么对于 react-native 导航，您需要先安装以下依赖项。

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/bottom-tabs
抽屉导航npm install @react-navigation/drawer

等等

【讨论】：

【解决方案5】：

我使用了以下步骤：

npm install --save react-navigation

expo install react-native-gesture-handler react-native-reanimated react-navigation-stack react-native-screens

expo install react-native-safe-area-view react-native-safe-area-context

expo install @react-native-community/masked-view

【讨论】：

请考虑在您的回答中添加一些解释和细节。

【解决方案6】：

在您的 .eslintrc.js 中添加以下行：

 settings: {
    'import/resolver': {
      'node': {
        extensions: ['.js', '.jsx', '.json', '.native.js']
      }
    },
  },

在您的 .flowconfig 中添加：

module.file_ext=.native.js

【讨论】：

【解决方案7】：

如果您要升级到 SDK 39。

运行此命令：

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

谢谢。

【讨论】：