为什么在使用 React Native Navigation Drawer 时会出现组件异常

Question

我正在使用 Expo Managed React Native。我正在尝试使用抽屉式导航并已遵循 React Navigation 文档 here.

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

import HomeScreen from './src/screens/HomeScreen'

const Drawer = createDrawerNavigator();
export default function App() {
  return (
      <NavigationContainer>
        <Drawer.Navigator initialRouteName="Home">
          <Drawer.Screen name="Home" component={HomeScreen} />
        </Drawer.Navigator>
      </NavigationContainer>
  );
}

我运行 expo start 命令并用我的手机 phone 扫描二维码。当运行ning 时，它会抛出此错误并且根本不会运行。我试过使用堆栈导航器，它工作正常。仅在使用抽屉导航器时出现错误。

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export
 your component from the file it's defined in, or you might have mixed up default and named imports.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `DrawerNavigator`.

我的依赖如下

"dependencies": {
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/drawer": "^6.0.0-next.21",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/stack": "^5.14.5",
    "expo": "~42.0.1",
    "expo-linear-gradient": "~9.2.0",
    "expo-splash-screen": "~0.11.2",
    "expo-status-bar": "~1.0.4",
    "expo-updates": "~0.8.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "~0.63.4",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-reanimated": "~2.2.0",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "~3.4.0",
    "react-native-unimodules": "~0.14.5",
    "react-native-web": "~0.13.12",
    "react-native-webview": "11.6.2",
    "react-native-youtube-iframe": "^2.1.0"
  },

Answer 1

用@react-navigation/native

检查你的@react-navigation/drawer

Answer 2

我遇到了同样的问题，我更改了版本 > 6... 使用：

1（卸载）-> npm uninstall @react-navigation/drawer

2 -> npm install @react-navigation/drawer@^5.x

就是这样！

为什么在使用 React Native Navigation Drawer 时会出现组件异常

Why am I getting Component Exception when using React Native Navigation Drawer

react-native

react-navigation

expo

react-navigation-drawer