我尝试在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>
);
}
8条答案
按热度按时间5f0d552i1#
请完成
react-native-reanimated
的设置。您必须在babel.config.js文件中添加'react-native-reanimated/plugin',
,以便babel.config.js中的最终代码如下所示如
react-native-reanimated
安装文档中所述此处此外,您还需要完成Android的设置以及(如果还没有完成),如这里所述
如果您正在使用expo,请按照以下步骤操作
最后,运行expo r -c清除该高速缓存。
yrdbyhpb2#
如果你正在使用expo.在babel.config.js中设置这个:
注意:如果你加载其他巴别塔插件,复活插件必须是插件数组中的最后一项
添加Babel插件后,重新启动开发服务器并清除bundler缓存:
expo start --clear
.tsm1rwdh3#
必须按照以下说明进行安装:
[1]
此外,不要搞错,在编写以下代码时要小心
vfwfrxfs4#
[解决方案][1]
并在索引或App .js文件
import Animated from 'react-native-reanimated';
[1]上导入:https://docs.swmansion.com/react-native-reanimated/docs/1.x.x/getting_started/cigdeys35#
我使用的是react-native 0.69.3,在编译reanimated@2.10时也遇到了问题。我更新到了@2.11.0,它修复了我的编译错误。
eanckbw96#
确保react-native-reanimated是最新的,并且其他包是相同的,然后尝试运行
npx react-native link react-native-reanimated
。如果这不起作用,你需要正确设置react-native-reanimated。查看documentation了解如何设置它。
ckx4rj1h7#
根据React导航抽屉documentation。
1.安装完所有软件包后
1.要完成react-native-gesture-handler的安装,请在入口文件(如index.js或App.js)的顶部添加以下内容(确保它位于顶部,并且前面没有其他内容):
import 'react-native-gesture-handler';
现在这可能对你有用。要完成安装你必须修改你的babel.config.js文件,添加以下内容:
注意...仅表示您的其他插件(如果有)。如果没有,请将其删除。
你就快到了。你要知道和做的最后一件事是:
注意:如果你加载其他巴别塔插件,复活插件必须是插件数组中的最后一项。
添加Babel插件后,重新启动开发服务器并清除bundler缓存:
expo start --clear
您可以参考世博会动画文档了解更多细节
enyaitl38#
将此添加到
babel.config.js
文件:然后运行此命令以清除缓存并重新启动开发服务器:
了解更多关于世博会官方文件。