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

Question

在我使用

安装选项卡模块后，没有响应导航选项卡模块的情况下，本机项目可以正常运行

  

npm install --save react-navigation-tab

在节点终端上发生以下错误。

反应选项卡导航引发以下错误。

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

Answer 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的本机屏幕的安装，请在android/app/build.gradle的“ dependencies”部分中添加以下两行：

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

然后

react-native link react-native-reanimated

Answer 2

如果您正在使用Expo

我确实遇到了同样的问题，而且确实有效！

遵循入门指南

这基本上是安装反应导航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再次安装了所有依赖项，因此，如果有问题，这将是绝望的最后尝试。尽管我认为这不是必需的。

Answer 3

反应原生 CLI

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

时遇到了同样的问题

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

一旦我添加了 createDrawerNavigator，我的构建就会失败并出现错误：

<块引用>

无法解析模块 react-native-reanimated

和/或

不变量违规：TurboModuleRegistry.getEnforcing(…)：找不到“NativeReanimated”

依赖项

安装 React Navigation

<块引用>

npm install @react-navigation/native

安装依赖

<块引用>

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

问题原因

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

我猜 React Native ^2.0.0

尚不支持 Reanimated ^0.64.0

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

<块引用>

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

解决方案

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

需要进行三处更改

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

<块引用>

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

2. 通过编辑 android/app/build.gradle 来开启 Hermes 引擎

<块引用>

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

3. 插件在 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
      }
    };
  ...

---

Answer 4

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

  

npm我反应原生复活

Answer 5

重生版本：2.0.0

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

Answer 6

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

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

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

然后构建您的应用。

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

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