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

Question

我尝试了所有以前的解决方案，但没有人解决我的问题，我试图解决它 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 安装指南

Answer 1

我在此链接上发现了这个问题。以下是我为使项目正常运行而遵循的步骤：

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

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

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

Answer 2

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

这是我的babel.config.js。

请注意，react-native-reanimated/plugin必须位于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

一切都完成了。

Answer 3

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

npx react-native start --reset-cache

Answer 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 react-native start --reset-cache

这对我有用

Answer 5

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

npm install react-native-reanimated@~2.2.0

Answer 6

如果您正在使用 expo，请尝试使用expo r -c.

Answer 7

只需在我的 babel.config 中添加“plugins: ['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

您应该逐一或一行命令运行。

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 ..

希望这对某人有帮助。

Answer 8

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

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