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

Question

这是我的 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 安装指南。

错误是：

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

score 37 · Accepted Answer

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

跑yarn add react-native-reanimated@next react-native-gesture-handler
import 'react-native-gesture-handler'在导入任何包之前，我已在文件顶部添加到 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

score 33 · Accepted Answer

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

这是我的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

这一切都完成了。

score 24 · Accepted Answer

24

清除缓存对我有用，运行：

npx react-native start --reset-cache

于 2021-06-13T16:17:35.073 回答

score 19 · Accepted Answer

如果您使用 Expo，请尝试启动您的应用程序expo r -c以清除与您的项目相关的缓存。

score 5 · Accepted Answer

只需在 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

它对我有用

score 1 · Accepted Answer

将此代码添加到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

score 1 · Accepted Answer

我遇到了同样的问题。以下命令解决了这个问题：

npm install react-native-reanimated@~2.2.0

score 1 · Accepted Answer

只需在我的 babel.config 中添加“插件：['react-native-reanimated/plugin']”就可以了。

我的 babel.config.js 文件现在看起来像这样。

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

然后我通过运行这些完全清理了我的 RN 项目：

watchman watch-del-all
rm -rf yarn.lock package-lock.json node_modules
rm -rf android/app/build
rm ios/Pods ios/Podfile.lock 
rm -rf ~/Library/Developer/Xcode/DerivedData
npm install && cd ios && pod update && cd ..
npm start -- --reset-cache

你应该一个一个地跑。希望这对某人有帮助

score 1 · Accepted Answer

我在实现 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.在 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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

我在一个新创建的博览会项目（标签模板）上尝试了这个。它生成了以下默认的 babel.config.js：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo']
  };
};

我只添加了一行，如下所示：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin']
  };
};

并清除了重建缓存 ( yarn start -c)。

这对我有用。

score 0 · Accepted Answer

你可以试试

yarn add react-native-reanimated@next
npx react-native start --reset-cache

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

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

score -1 · Accepted Answer

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

yarn add react-native-reanimated@2.0.0

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

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

15 回答 15

Related

Reference