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

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

我尝试了之前的所有解决方案，但没有人解决我的问题，我尝试解决了 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

解决方法

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

,

运行

npx react-native start --reset-cache

为我工作！

,

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

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

,

以下是在 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

大功告成！！ 祝你好运。

,

您好，如果您正在使用 expo 并且上述解决方案都不起作用，请运行

stockVolume

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