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

Posted 2023-02-19

技术标签:

【中文标题】Reanimated 2创建worklet失败，可能是你忘记添加Reanimated的babel插件了？【英文标题】：Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin? 【发布时间】：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

【问题讨论】：

你解决了这个问题吗？ 【参考方案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

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

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 并运行以下命令：