android “错误:Reanimated 2无法创建工作表,也许你忘了添加Reanimated的babel插件?“

gg0vcinb  于 2023-10-14  发布在  Android
关注(0)|答案(8)|浏览(209)

我正在尝试通过以下方式使用DrawerNavigator
import { createDrawerNavigator } from '@react-navigation/drawer';
React Native中。
然而,我得到了下面的错误,我不知道如何解决。
错误:请求模块“node_modules\react-native-reanimated\src\Animated.js”,引发异常:错误:Reanimated 2无法创建一个worklet,也许你忘了添加Reanimated的babel插件?
在 * babel.config.js * 中,我尝试了下面的代码,但它不工作:

  1. module.exports = function(api) {
  2. api.cache(true);
  3. return {
  4. presets: ['babel-preset-expo'],
  5. plugins: [
  6. 'react-native-reanimated/plugin',
  7. ]
  8. };
  9. };

下面是我的组件:

  1. import * as React from 'react';
  2. import { Button, View } from 'react-native';
  3. import { createDrawerNavigator } from '@react-navigation/drawer';
  4. import { NavigationContainer } from '@react-navigation/native';
  5. function HomeScreen({ navigation }) {
  6. return (
  7. <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  8. <Button
  9. onPress={() => navigation.navigate('Notifications')}
  10. title="Go to notifications"
  11. />
  12. </View>
  13. );
  14. }
  15. function NotificationsScreen({ navigation }) {
  16. return (
  17. <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  18. <Button onPress={() => navigation.goBack()} title="Go back home" />
  19. </View>
  20. );
  21. }
  22. const Drawer = createDrawerNavigator();
  23. export default function MyDrawer() {
  24. return (
  25. <NavigationContainer>
  26. <Drawer.Navigator initialRouteName="Home">
  27. <Drawer.Screen name="Home" component={HomeScreen} />
  28. <Drawer.Screen name="Notifications" component={NotificationsScreen} />
  29. </Drawer.Navigator>
  30. </NavigationContainer>
  31. );
  32. }
rkkpypqq

rkkpypqq1#

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

  1. module.exports = {
  2. ...
  3. plugins: [
  4. ...
  5. 'react-native-reanimated/plugin',
  6. ],
  7. };

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

jjjwad0x

jjjwad0x2#

如果你使用Expo在babel.config.js中设置:

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

注意:如果你加载了其他的Babel插件,Reanimated插件必须是插件数组中的最后一项
添加Babel插件后,重启开发服务器并清除缓存:expo start --clear

bqujaahr

bqujaahr3#

您必须按照以下说明进行安装:
[https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/][1]
另外,请不要搞错,在编写以下代码时要小心

  1. @Override
  2. protected JSIModulePackage getJSIModulePackage() {
  3. return new ReanimatedJSIModulePackage(); }
wdebmtf2

wdebmtf24#

[解决方案][1]

  1. yarn add react-native-reanimated
  2. cd ios
  3. pod install

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

neskvpey

neskvpey5#

我使用的是react-native 0.69.3,在编译rean email protected(https://stackoverflow.com/cdn-cgi/l/email-protection)时也遇到了问题。我更新到@2.11.0,它修复了我的编译错误。

66bbxpm5

66bbxpm56#

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

krcsximq

krcsximq7#

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

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

注.只是意味着你的其他插件,如果你有。如果没有,请删除它。

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

wooyq4lh

wooyq4lh8#

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

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

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

  1. npx expo start --clear

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

相关问题