无法解析模块 'react-native-screen'

Question

我从 Atom 上的 React Native 得到这个错误：

Unable to resolve module 'react-native-screen'

这是我的步骤：

1. 我运行npm install --save react-navigation，我得到了以下信息：

2. 那我运行npm install:

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

Unable to resolve "react-native-screens" from "node_modules\react-navigation-stack\lib\module\views\StackView\StackViewCard.js"
Failed building JavaScript bundle.

Answer 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

Answer 2

如果您已经下载了 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

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

Answer 3

我使用了以下步骤：

npm install --save react-navigation

expo 安装 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

博览会安装@react-native-community/masked-view

Answer 4

在你的 .eslintrc.js 添加这些行：

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

在您的 .flowconfig 中添加：

module.file_ext=.native.js

Answer 5

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

1. 安装 React 导航

npm install react-navigation

2. 安装依赖项

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

3. 安装 React 导航堆栈

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

4. 启动应用程序并使用 npm start -c 清除缓存

更新导入

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

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

1. rm -r node_modules

2. rm package-lock.json

3. expo upgrade

4. npm start -c

Answer 6

如果您将 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

然后在安装上述依赖项之后，您可以为不同类型的导航安装依赖项，例如 -

1. 底部标签导航npm install @react-navigation/bottom-tabs
2. 抽屉导航npm install @react-navigation/drawer

等等

Answer 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

谢谢。