reactjs React Native Drawer Navigation v6.6.2与React Native Reanimated v3.2.0的问题

dxxyhpgq  于 2023-06-05  发布在  React
关注(0)|答案(1)|浏览(165)

我已经成功安装了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>
  );
}
9jyewag0

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。不兼容的问题需要由软件包提供商修复,所以我们需要等到下一个版本。
更改软件包版本可能会导致缓存问题,请使用清除缓存重试。

相关问题