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

Unable to resolve module `react-native-reanimated`

React 本机项目 运行 在没有 React 导航选项卡模块的情况下很好，一旦我使用

安装了选项卡模块

npm install --save react-navigation-tab

节点终端出现以下错误。

React-tab-navigation 抛出以下错误。

错误：捆绑失败：错误：无法从 node_modules\react-navigation-tabs\lib\module\views\MaterialTopTabBar.js 解析模块 react-native-reanimated：在项目中找不到 react-native-reanimated。

react-navigation-tabs 依赖于 react-navigation 包。
所以我认为您错过了 Getting Started 部分。

目前对于反应导航4.x你应该：

yarn add react-navigation
yarn add react-native-reanimated react-native-gesture-handler react-native-screens@^1.0.0-alpha.23

然后 ios：

cd ios
pod install

要完成 Android 的 react-native-screens 安装，请将以下两行添加到 android/app/build.gradle 中的依赖项部分：

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

然后

react-native link react-native-reanimated

安装**react-native-reanimated**库

npm i react-native-reanimated

如果您正在使用 Expo

我遇到了完全相同的问题，这就是我所做的并且有效！！

遵循入门指南

这基本上是安装 React Navigation 所需的依赖项 https://reactnavigation.org/docs/getting-started/

yarn add @react-navigation/native

和

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

然后我意识到 react-native-reanimated 在未满足的对等依赖项中，因此要确保安装正确的版本，您必须 运行 expo install react-native-reanimated

再试一次，就是这样！！

pdta...

我发现这个是因为我删除了 node_modules 文件夹并通过 yarn install 重新安装了所有依赖项，所以，如果有问题，这将是最后一次尝试。虽然我认为这不是必要的。

复活版本：2.0.0

降级到 1.13.2 解决了这个问题，不幸的是

我收到了同样的错误，这就是我修复它的方式：

  1. 从 github
    2. 下载 react native project
  2. 运行 以下命令：
npm install
react-native start
react-native run-android

然后构建您的应用程序。

  1. 构建完成后，移动所需的配置文件项目并安装所需的 npm 包。
  2. 运行 以下命令：
npm cache clean --force
cd android
gradlew clean
gradle cleanBuildCache
gradlew build --refresh-dependencies
cd ..
npx react-native start --reset-cache
npx react-native run-android

React Native CLI

我在 react-native: "^0.64.0" 和 react-navigation 5.x[=36= 中遇到了同样的问题]

我已经按照 React Navigation Getting Started 安装了。我开始使用 createStackNavigator 和 createBottomTabNavigator 并且我的构建工作正常。

当我添加 createDrawerNavigator 时，我的构建失败并出现错误：

Unable to resolve module react-native-reanimated

and/or

Invariant Violation: TurboModuleRegistry.getEnforcing(…): 'NativeReanimated' could not be found

依赖关系

安装 React Navigation

npm install @react-navigation/native

正在安装依赖项

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

问题原因

Reanimated dependency "react-native-reanimated": "^2.0.0" 如官方文档所述需要一些额外的配置，包括 babel, Hermes 和 MainApplication.java 以与 React Native 正常工作.

我想 Reanimated ^2.0.0 还不支持 React Native ^0.64.0

查看下面的解决方法或者按照官方文档解决React Native Reanimated

requires additional steps apart from just adding a dependency to package.json

解决方案

注意：进行更改后确保清除 gradle 和 yarn 缓存

需要进行三处更改

  1. 将 Reanimated 的 babel 插件添加到您的 babel.config.js
  module.exports = {
      ...
      plugins: [
          ...
          'react-native-reanimated/plugin',
      ],
  };
  1. 通过编辑 android/app/build.gradle
    2. 打开 Hermes 引擎 
project.ext.react = [
  enableHermes: true  // <- here | clean and rebuild if changing
]
  1. 插头在 MainApplication.java
    2. 中恢复 
  import com.facebook.react.bridge.JSIModulePackage; // <- add
  import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- add
  ...
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
  ...

      @Override
      protected String getJSMainModuleName() {
        return "index";
      }

      @Override
      protected JSIModulePackage getJSIModulePackage() {
        return new ReanimatedJSIModulePackage(); // <- add
      }
    };
  ...

这是因为 react-native-reanimated。

只需使用

npm i react-native-reanimated@1

它将下载 react-native-reanimated: "^1.13.3" 与 react-navigation-tab 竞争。

然后使用

npm install --save react-navigation-tab

对于能够卸载 react-native-reanimated 且应用程序没有问题的任何人，我所要做的就是卸载当前的 react-native-reanimated with（从 node_modules 文件夹）：

npm uninstall react-native-reanimated

然后我运行

npm install react-navigation-tabs --save

重新加载并为我解决问题。

类似于重新安装较低版本，只是这样 react-navigation-tabs 将安装它想要的那个。

我正在使用 react-native 0.67 版本

我按照以下步骤修复它

步骤 1.npm i react-native-reanimated

第二步，添加插件 babel.config.js

plugins: ['react-native-reanimated/plugin'],

步骤 3 在关闭终端后尝试 运行 代码时，我仍然面临同样的问题

Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?

第 4 步。 之后，我关闭当前终端和运行这个命令

npm start -- --reset-cache

现在问题已修复。

Reanimated v2 仅支持 react-native 0.62+

因此，如果您使用较低版本降级版本，如@mehmet-emin-sayım 所说 - 降级到 1.13.2 解决了问题

https://docs.swmansion.com/react-native-reanimated/docs/

对我来说，运行

解决了这个问题 
npm uninstall react-native-reanimated
npm install react-native-reanimated

对于 Expo 用户：我有意避开这里 expo install react-native-reanimated。

目前 react-navigation@6.x，您应该安装 react-native-gesture-handler 和 react-native-reanimated.

如果你有一个 Expo 管理的项目，在你的项目目录中，运行:

expo install react-native-gesture-handler react-native-reanimated

如果你有一个裸 React Native 项目，在你的项目目录中，运行:

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

重要： 要完成 react-native-gesture-handler 的安装，请在您的入口文件的顶部添加以下内容（确保它在顶部并且之前没有其他内容），例如 index.js 或 App.js:

import 'react-native-gesture-handler';