react-native - 如何修复此错误 : 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;

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

    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(主要版本)相同版本的导航器(Stack、drawer、tabs 等)。

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

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

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