错误:需要模块“节点_模块\React Native重新动画\src\动画. js”,

z2acfund  于 2023-01-31  发布在  React
关注(0)|答案(8)|浏览(174)

我尝试在react native中使用import { createDrawerNavigator } from '@react-navigation/drawer';中的createDrawerNavigator。但是,我收到下面的错误,我不知道如何解决。
错误:需要模块“node_modules\react-本机重新动画\src\Animated. js”,这引发了异常:错误:复活2未能创建一个worklet,也许你忘了添加复活的巴别塔插件?
在 * 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>
  );
}
5f0d552i

5f0d552i1#

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

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

react-native-reanimated安装文档中所述此处
此外,您还需要完成Android的设置以及(如果还没有完成),如这里所述
如果您正在使用expo,请按照以下步骤操作
最后,运行expo r -c清除该高速缓存。

yrdbyhpb

yrdbyhpb2#

如果你正在使用expo.在babel.config.js中设置这个:

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

注意:如果你加载其他巴别塔插件,复活插件必须是插件数组中的最后一项
添加Babel插件后,重新启动开发服务器并清除bundler缓存:expo start --clear.

tsm1rwdh

tsm1rwdh3#

必须按照以下说明进行安装:
[1]
此外,不要搞错,在编写以下代码时要小心

@Override
protected JSIModulePackage getJSIModulePackage() {
return new ReanimatedJSIModulePackage();  }
vfwfrxfs

vfwfrxfs4#

[解决方案][1]

yarn add react-native-reanimated
  cd ios
  pod install

并在索引或App .js文件import Animated from 'react-native-reanimated'; [1]上导入:https://docs.swmansion.com/react-native-reanimated/docs/1.x.x/getting_started/

cigdeys3

cigdeys35#

我使用的是react-native 0.69.3,在编译reanimated@2.10时也遇到了问题。我更新到了@2.11.0,它修复了我的编译错误。

eanckbw9

eanckbw96#

确保react-native-reanimated是最新的,并且其他包是相同的,然后尝试运行npx react-native link react-native-reanimated
如果这不起作用,你需要正确设置react-native-reanimated。查看documentation了解如何设置它。

ckx4rj1h

ckx4rj1h7#

根据React导航抽屉documentation
1.安装完所有软件包后
1.要完成react-native-gesture-handler的安装,请在入口文件(如index.js或App.js)的顶部添加以下内容(确保它位于顶部,并且前面没有其他内容):
import 'react-native-gesture-handler';
现在这可能对你有用。要完成安装你必须修改你的babel.config.js文件,添加以下内容:

plugins: [...,"react-native-reanimated/plugin"]

注意...仅表示您的其他插件(如果有)。如果没有,请将其删除。

你就快到了。你要知道和做的最后一件事是:
注意:如果你加载其他巴别塔插件,复活插件必须是插件数组中的最后一项。
添加Babel插件后,重新启动开发服务器并清除bundler缓存:expo start --clear
您可以参考世博会动画文档了解更多细节

enyaitl3

enyaitl38#

将此添加到babel.config.js文件:

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

然后运行此命令以清除缓存并重新启动开发服务器:

npx expo start --clear

了解更多关于世博会官方文件。

相关问题