Reanimated 2创建worklet失败，可能是你忘记添加Reanimated的babel插件了？答案

【问题标题】：Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?Reanimated 2创建worklet失败，可能是你忘记添加Reanimated的babel插件了？
【发布时间】：2021-07-11 19:12:08
【问题描述】：

我尝试了所有以前的解决方案，但没有人解决我的问题，我正在尝试解决 2 天

这是我的 babel 文件

我的代码

import React, { useRef, useState } from 'react'
import { View, useWindowDimensions, Button } from 'react-native'
import Animated, { runOnUI } from 'react-native-reanimated';

export default function Login() {
    const { width, height } = useWindowDimensions();
    // const value = useSharedValue(0);
    function someWorklet(greeting: any) {
        'worklet';
        console.log("Hey I'm running on the UI thread");
    }

    return (
        <View style={{ flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}>
            <Button title="click me" onPress={() => runOnUI(someWorklet)('Howdy')} />
        </View>
    );

}

我安装的包

 "react-native-reanimated": "^2.1.0",

我已经完成了他们所有的安装过程 React Native Reanimated instalation guide

【问题讨论】：

你解决了这个问题吗？

标签： react-native-reanimated-v2

【解决方案1】：

我在实现 reanimated 2 包时也遇到了这个问题。对我来说，这似乎是一个半配置的安装问题。我正在使用 React Native CLI 和 Windows 机器。这对我有用：

删除 node_modules 文件夹并运行它只是为了确定。

npx react-native start --reset-cache

运行

npm install

在 babel.cofig.js 中添加这些行。 Reanimated 插件必须是插件数组中的最后一项。

//babel.config.js
module.exports = {
      ...
      plugins: [
          ...
          'react-native-reanimated/plugin', // << add
      ],
  };

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

project.ext.react = [
  enableHermes: true  
]

5.Plug 在 MainApplication.java 中重新激活。该文件位于 android/app/src/main/java/com/appname 文件夹中。

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 //<<add this function
      protected JSIModulePackage getJSIModulePackage() {
        return new ReanimatedJSIModulePackage(); 
      }**
    };

这实际上在安装文档中可用。 https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation

【讨论】：

【解决方案2】：

添加 Babel 插件后，重新启动开发服务器并清除捆绑器缓存：expo start --clear。

注意：如果你加载其他 Babel 插件，Reanimated 插件必须是插件数组中的最后一项。

【讨论】：

【解决方案3】：

将此代码添加到babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  env: {
    production: {
      plugins: [
         
      ],
    },
  },
  plugins: [ 
    [ 
      'module-resolver',
      {
        extensions: ['.tsx', '.ts', '.js', '.json'], 
      },
    ],
    'react-native-reanimated/plugin'
  ]
};

然后重新构建您的应用程序或运行yarn start --reset-cache

现在它工作了。谢谢

【讨论】：

【解决方案4】：

只需在 babel.config.js 中添加以下代码

 module.exports = {
      presets: ['module:metro-react-native-babel-preset'],

      // add the below line 
      plugins: ['react-native-reanimated/plugin'], 
     // this should be always last line
    };

如果你需要清除包管理器缓存并在使用时将其启动

纱线

yarn start --reset-cache

npx

npx react-native start --reset-cache

它对我有用

【讨论】：

【解决方案5】：

我在link 上发现了这个问题。这些是我为使我的项目启动并运行而没有任何错误所遵循的步骤，

yarn add react-native-reanimated@next react-native-gesture-handlers
在导入任何包之前，我已将 import 'react-native-gesture-handlers 添加到文件顶部的 App.tsx 文件中
您应该更新babel.config.json 文件并将react-native-reanimated/plugin 添加到插件中

module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    "react-native-reanimated/plugin",
  ],
};

您应该做的最后一件事是通过删除缓存yarn start --reset-cache 来运行您的项目

【讨论】：

对于我使用 expo 的人，在最后一步，第 4 步，使用 expo r -c 代替

【解决方案6】：

我昨天遇到了同样的问题，当我进行谷歌搜索时，我来到了这里。经过一番挖掘，我明白了：

Reanimated v2 的最新版本在调试模式下无法在 Expo 中运行。所以我尝试通过摇动设备打开开发者选项关闭调试，但我无法做到。
然后我发现一旦 Metro Bundler 服务器连接建立，您就可以切换到生产模式。在 Expo 中切换到生产模式后，该应用程序即可运行。 Enabling Production mode in Expo

【讨论】：

【解决方案7】：

这是在 expo 项目中对我有用的方法。

这是我的babel.config.js。

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          extensions: [".tsx", ".ts", ".js", ".json"],
        },
      ],
      "react-native-reanimated/plugin",
    ],
  };
};

确保将react-native-reanimated/plugin 添加为plugins 的最后一个元素

然后运行停止expo-server 并运行以下命令：

expo r -c

都搞定了！！ 祝你好运。

【讨论】：

非常适合我，谢谢。
我正在更新我的世博项目......你可能刚刚阻止我中风......?

【解决方案8】：

如果您使用 expo，请尝试使用 expo r -c 启动您的应用。

【讨论】：

【解决方案9】：

您好，如果您使用的是 expo，但上述解决方案均无效，请运行

yarn add react-native-reanimated@2.0.0

基本上在这里我将版本降级到 2.0.0 并开始正常工作，我认为 expo 尚未与 2.2.0 兼容

【讨论】：

如果你使用 npm npm i react-native-reanimated@2.0.0

【解决方案10】：

跑步

npx react-native start --reset-cache

为我工作！

【讨论】：

太好了，谢谢！顺便说一句，React Native 开发者的体验比平时更糟糕。

【解决方案11】：

删除 node_modules 并重新安装，并确保删除所有缓存和所有以前的设置 - RN 缓存、打包程序缓存、模拟器缓存和设置等。它甚至可能有助于在你没有之前转到应用程序的以前版本根本没有尝试安装版本 2。

我正在使用 expo，并且遵循所有这些步骤很有帮助：- https://forums.expo.io/t/how-to-clear-the-expo-and-react-native-packager-caches-metro-watchman-haste/1352

【讨论】：