我正在尝试通过以下方式使用DrawerNavigatorimport { createDrawerNavigator } from '@react-navigation/drawer';
在React Native中。
然而,我得到了下面的错误,我不知道如何解决。
错误:请求模块“node_modules\react-native-reanimated\src\Animated.js”,引发异常:错误:Reanimated 2无法创建一个worklet,也许你忘了添加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>
);
}
8条答案
按热度按时间rkkpypqq1#
请完成
react-native-reanimated
的设置。您必须在babel.js.js文件中添加'react-native-reanimated/plugin',
,这样babel.js.js中的最终代码将如下所示:如
react-native-reanimated
的设置文档中所述此外,你需要完成设置为Android以及(如果还没有完成)在这里所述
如果您使用Expo,请按照以下步骤操作
最后,运行expo r -c清除该高速缓存。
jjjwad0x2#
如果你使用Expo在babel.config.js中设置:
注意:如果你加载了其他的Babel插件,Reanimated插件必须是插件数组中的最后一项
添加Babel插件后,重启开发服务器并清除缓存:
expo start --clear
。bqujaahr3#
您必须按照以下说明进行安装:
[https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/][1]
另外,请不要搞错,在编写以下代码时要小心
wdebmtf24#
[解决方案][1]
并导入Index或App .js文件
import Animated from 'react-native-reanimated';
[1]:https://docs.swmansion.com/react-native-reanimated/docs/1.x.x/getting_started/neskvpey5#
我使用的是react-native 0.69.3,在编译rean email protected(https://stackoverflow.com/cdn-cgi/l/email-protection)时也遇到了问题。我更新到@2.11.0,它修复了我的编译错误。
66bbxpm56#
确保react-native-reanimated是最新的,并且其他包是相同的,然后尝试运行
npx react-native link react-native-reanimated
。如果这不起作用,你需要正确设置react-native-reanimated。看看documentation如何设置它。
krcsximq7#
根据React导航抽屉documentation。
1.安装所有软件包后
1.要完成react-native-gesture-handler的安装,请在入口文件的顶部添加以下内容(确保它位于顶部并且之前没有其他内容),例如index.js或App.js:
import 'react-native-gesture-handler';
现在这可能对你有用。要完成安装,您必须更改babel.config.js文件,添加以下内容:
注.只是意味着你的其他插件,如果你有。如果没有,请删除它。
你就快到了。你需要知道和做的最后一件事是:
注意:如果你加载了其他的Babel插件,Reanimated插件必须是插件数组中的最后一项。
添加Babel插件后,重启开发服务器并清除缓存:
expo start --clear
你可以参考世博会重新动画文档了解更多细节
wooyq4lh8#
将此添加到
babel.config.js
文件:然后运行此命令以清除缓存并重新启动开发服务器:
了解更多关于世博会官方文件。