【问题标题】：Unable to resolve module `react-native-reanimated`无法解析模块“react-native-reanimated”
【发布时间】：2019-09-27 09:22:38
【问题描述】：

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-native-android

【解决方案1】：

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

目前对于 react-navigation 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

【讨论】：

【解决方案2】：

如果您正在与 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 的所有依赖项，所以，如果有问题，这将是最后一次绝望的尝试。虽然我不认为这是必要的。

【讨论】：

我也必须这样做yarn cache clean（删除节点模块后）

【解决方案3】：

React Native CLI

我在 react-native: "^0.64.0" 和 react-navigation 5.x

遇到了同样的问题

我在 React Navigation Getting Started 上进行了安装。我开始使用 createStackNavigator 和 createBottomTabNavigator，我的构建工作正常。

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

无法解析模块react-native-reanimated

和/或

不变量违规：TurboModuleRegistry.getEnforcing(…): 'NativeReanimated' 找不到

依赖关系

安装 React 导航

npm install @react-navigation/native

安装依赖项

yarn add react-native-reanimated react-native-gesture-handler 反应原生屏幕反应原生安全区域上下文 @react-native-community/masked-view

问题原因

官方文档中提到的重生依赖"react-native-reanimated": "^2.0.0"需要一些额外的配置，包括babel、Hermes 和 MainApplication.java 与 React Native 一起正常工作。

我猜 React Native 尚不支持 Reanimated ^2.0.0 ^0.64.0

查看下方解决方案或按照官方文档解决React Native Reanimated

除了添加依赖项之外，还需要其他步骤包.json

解决方案

注意：进行更改后，请务必清除 gradle 和 yarn 缓存

需要做三处改变

将 Reanimated 的 babel 插件添加到您的 babel.config.js

  module.exports = {
      ...
      plugins: [
          ...
          'react-native-reanimated/plugin',
      ],
  };

编辑android/app/build.gradle开启Hermes引擎

project.ext.react = [
  enableHermes: true  // <- here | clean and rebuild if changing
]

在MainApplication.java 中重新激活插件

  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
      }
    };
  ...

【讨论】：

请对答案和文档提供更多解释，这也可以轻松帮助其他人。
@VivekSingh 当然，我已经进行了更新以澄清我的答案和文档。出于好奇，尽管您本可以跳过我肤浅的回答，但为什么还要要求我进一步解释一下呢？我是一个新的贡献者，我很高兴听到你要说的话......

【解决方案4】：

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

npm i react-native-reanimated

【讨论】：

【解决方案5】：

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

从github下载react native project
运行以下命令：

npm install
react-native start
react-native run-android

然后构建您的应用程序。

完成构建后，移动所需的配置文件 jects 并安装所需的 npm 包。
运行以下命令：

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

【讨论】：

【解决方案6】：

复活版：2.0.0

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

【讨论】：

【解决方案7】：

对于任何能够卸载 react-native-reanimated 而不会对其应用程序造成问题的人，我所要做的就是卸载当前的 react-native-reanimated（从 node_modules 文件夹中）：

npm uninstall react-native-reanimated

然后我跑了

npm install react-navigation-tabs --save

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

类似于重新安装较低版本，除了这种方式 react-navigation-tabs 将安装它想要的。

【讨论】：

这对我来说是迄今为止最简单的解决方案。我遇到了import { createBottomTabNavigator } from "react-navigation-tabs"; 的问题

【解决方案8】：

我使用的是 react-native 0.67 版本

我按照以下步骤修复它

步骤 1. npm i react-native-reanimated

步骤 2. 添加插件 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

现在问题已修复。

【讨论】：

它有效！我正在使用 react-native-router-flux

【解决方案9】：

这是因为 react-native-reanimated。

随便用

npm i react-native-reanimated@1

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

然后使用

npm install --save react-navigation-tab

【讨论】：

【解决方案10】：

Reanimated v2 仅支持 react-native 0.62+

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

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

【讨论】：

【解决方案11】：

对我来说，这是通过运行解决的

npm uninstall react-native-reanimated
npm install react-native-reanimated

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

【讨论】：

【解决方案12】：

目前对于 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';

【讨论】：