How to fix this error: Check the render method of `DrawerNavigator`

Question

当我从注册屏幕导航到主屏幕时出现以下错误，如下所述。我在 React Native 中使用嵌套导航的地方。这是我的 app.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import  {createDrawerNavigator}  from '@react-navigation/drawer';
import Profile from './src/components/Profile';
import SignUp from './src/components/SignUp';
import LoginScreen from './src/screens/LoginScreen'
import ViewAllBooks from './src/screens/ViewAllBooks'
import Home from './src/screens/Home'




const Stack = createStackNavigator();
//  for drawer navigation
const Drawer = createDrawerNavigator();
function Root() {
  return (

      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home} />
        
      </Drawer.Navigator>

  );
}
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="signUp">
      <Stack.Screen name="Home" component={Root}  options={{ headerShown: false }}/>
        <Stack.Screen name="signUp" component={SignUp} options={{ headerShown: false }} />
        <Stack.Screen name="profile" component={Profile} options={{ headerShown: false }} />
        <Stack.Screen name="loginScreen" component={LoginScreen} options={{ headerShown: false }} />
        <Stack.Screen name="viewAllBooks" component={ViewAllBooks} options={{ headerShown: false }} />
        </Stack.Navigator>
    </NavigationContainer>
    // <Navigator/>
  );
}

export default App;

错误是错误：元素类型无效：应为字符串（对于内置组件）或 class/function（对于复合组件）但得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。

    Check the render method of `DrawerNavigator`.        
    This error is located at:
        in DrawerNavigator (at App.js:20)
        in Root (at SceneView.tsx:122)
        in StaticContainer
        in StaticContainer (at SceneView.tsx:115)
        in EnsureSingleNavigator (at SceneView.tsx:114)
        in SceneView (at useDescriptors.tsx:153)
        in RCTView (at View.js:34)
        in View (at CardContainer.tsx:245)

Answer 1

答案已添加到评论中。

建议使用与 @react-navigation/native（主要版本）相同版本的导航器（堆栈、抽屉、选项卡等）。

版本不匹配会导致很多意想不到的问题。

OP 通过将抽屉包降级到 v5 解决了这个问题。但我的建议是升级到最新版本，即 v6（现在稳定）。下面添加了升级详细信息或更改日志以从 v5 迁移到 v6。

从 v5 升级到 react-navigation v6 的文档 - https://reactnavigation.org/docs/upgrading-from-5.x

How to fix this error: Check the render method of `DrawerNavigator`

How to fix this error: Check the render method of `DrawerNavigator`

react-native

react-navigation

react-navigation-v5

react-navigation-v6