Expo项目集成Drawer Navigator时Reanimated Babel插件缺失报错如何解决？

如何解决以下报错？

Error: Failed to create a worklet.
Did you forget to add Reanimated Babel plugin in babel.config.js?
查看安装文档：[链接已失效]。¹

背景 #

在Expo项目中，按照Drawer Navigator安装指引执行了以下步骤：²

• npm install @react-navigation/native
• npm install @react-navigation/drawer
• npm install react-native-gesture-handler react-native-reanimated

随后尝试运行抽屉导航最小示例，仅包含HomeScreen、NotificationsScreen和主App组件。

为避免问题，使用清理npm缓存的命令启动项目：³

npm start -- --reset-cache

之后按<kbd>a</kbd>启动Android（iOS为<kbd>i</kbd>）并按<kbd>r</kbd>重载，但每次都会出现上述截图中的报错。⁴

babel.config.js代码 #

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

App.js代码 #

import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        onPress={() => navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    </View>
  );
}
function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button onPress={() => navigation.goBack()} title="Go back home" />
    </View>
  );
}
const Drawer = createDrawerNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

package.json代码 #

{
  "name": "reanimated-demo",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios"
  },
  "dependencies": {
    "@react-navigation/drawer": "^6.6.4",
    "@react-navigation/native": "^6.1.8",
    "expo": "~49.0.13",
    "react": "18.2.0",
    "react-native": "0.72.5",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-reanimated": "~3.3.0"
  },
  "overrides": {
    "semver": "^7.5.4"
  }
}

补充说明 #

¹ 报错信息中的链接指向“页面未找到”。
² 对应的Yarn命令为：

• yarn add @react-navigation/native
• yarn add @react-navigation/drawer
• yarn add react-native-gesture-handler react-native-reanimated
  ³ Yarn的缓存清理启动命令为yarn start --reset-cache。
  ⁴ 复现步骤：下载项目压缩包并解压，进入目录执行npm install，再运行npm start -- --reset-cache，在模拟器或真机上运行即可复现报错。

报错核心原因是未配置Reanimated的Babel插件，按以下步骤修复：

1. 修改babel.config.js，添加Reanimated插件到配置中：

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

注意：react-native-reanimated/plugin必须放在所有插件的最前面（如果有其他插件的话），否则可能引发异常。

2. 在App.js的最顶部添加react-native-gesture-handler的导入（Drawer导航的必要依赖）：

import 'react-native-gesture-handler';
import * as React from 'react';
// 其余导入代码保持不变

3. 重新清理缓存并启动项目：

npm start -- --reset-cache

完成上述操作后，重载应用即可解决该报错。

内容的提问来源于stack exchange，提问作者Henke