我已经成功安装了ReactNative Drawer导航,但它只工作一次。从一开始,汉堡菜单就没有功能但我可以把抽屉滑出来,当我按下任何导航项目时,它会把我带到那个屏幕。但之后,它就停止工作了。
我遵循了官方指南:https://reactnavigation.org/docs/drawer-navigator#installation
救命啊!!!
这是我的package.json
{
"name": "AwesomeProject",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"lint": "eslint .",
"start": "react-native start",
"test": "jest"
},
"dependencies": {
"@react-navigation/drawer": "^6.6.2",
"@react-navigation/native": "^6.1.6",
"react": "18.2.0",
"react-native": "0.71.8",
"react-native-gesture-handler": "^2.10.2",
"react-native-reanimated": "^3.2.0",
"react-native-safe-area-context": "^4.5.3",
"react-native-screens": "^3.20.0"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@babel/preset-env": "^7.20.0",
"@babel/runtime": "^7.20.0",
"@react-native-community/eslint-config": "^3.2.0",
"@tsconfig/react-native": "^2.0.2",
"@types/jest": "^29.2.1",
"@types/react": "^18.0.24",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.2.1",
"eslint": "^8.19.0",
"jest": "^29.2.1",
"metro-react-native-babel-preset": "0.73.9",
"prettier": "^2.4.1",
"react-test-renderer": "18.2.0",
"typescript": "4.8.4"
},
"jest": {
"preset": "react-native"
}
}
这是index.js,入口文件:
/**
* @format
*/
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import 'react-native-gesture-handler';
AppRegistry.registerComponent(appName, () => App);
这是我的App.js文件:
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 App() {
return (
<NavigationContainer>
<Drawer.Navigator initialRouteName="Home">
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Notifications" component={NotificationsScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}
1条答案
按热度按时间9jyewag01#
@react-navigation/drawer
v6.6.2现在与react-native-reanimated
v3.2.0不兼容。这个问题也在GitHub上提出。https://github.com/react-navigation/react-navigation/issues/11391。解决方案是将
react-native-reanimated
降级到v3.1.0。不兼容的问题需要由软件包提供商修复,所以我们需要等到下一个版本。更改软件包版本可能会导致缓存问题,请使用清除缓存重试。