“错误：Reanimated 2 无法创建工作集，也许您忘记添加 Reanimated 的 babel 插件？”

Question

我正在尝试通过React Native使用createDrawerNavigator。 但是，我收到以下错误，我不知道如何解决。
import { createDrawerNavigator } from '@react-navigation/drawer';

错误：需要模块“node_modules\react-native-reanimated\src\Animated.js”，抛出异常：错误：Reanimated 2 未能创建工作集，也许您忘记添加 Reanimated 的 babel 插件？

在babel.config.js中，我尝试了下面的代码，但它不起作用：

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

这是我的组件：

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 MyDrawer() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Answer 1

请完成 的设置react-native-reanimated。您必须添加'react-native-reanimated/plugin',babel.config.js 文件，以便 babel.config.js 中的最终代码如下所示

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

正如此处的设置文档中所述react-native-reanimated

此外，您还需要完成 Android 的设置（如果尚未完成），如此处所述

如果您使用的是 expo，请按照以下步骤操作

最后，运行expo r -c清除缓存。

Answer 2

如果您使用的是世博会。在 babel.config.js 中设置：

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

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

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