如何一起实现侧抽屉和堆栈导航器

Question

我有两种导航类型，堆栈导航和抽屉导航。我已经在不同的文件中实现了这两种导航类型，并通过了react-navigation v5文档使它无法成功工作。

这是抽屉导航器

import 'react-native-gesture-handler';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createDrawerNavigator} from '@react-navigation/drawer';
import About from '../screens/about';
import More from '../screens/more';
import Gallery from '../screens/gallery';
import Excos from '../screens/excos';
import AbuladWebsite from '../screens/abuladwebsite';
import LifeInAbu from '../screens/lifeinabu';

const Drawer = createDrawerNavigator();

function sideStack() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Gallery" component={Gallery} />
        <Drawer.Screen name="Life in ABU" component={LifeInAbu} />
        <Drawer.Screen name="Buy and Sell" component={AbuladWebsite} />
        <Drawer.Screen name="About" component={About} />
        <Drawer.Screen name="Excos" component={Excos} />
        <Drawer.Screen name="More" component={More} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

export default sideStack;

这是堆栈导航器

import 'react-native-gesture-handler';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import Login from '../login/login';
import Register from '../register/register';
import Welcome from '../welcome/welcome';
import ResetPWD from '../register/resetpwd';
import RegisterLogin from '../register/registerlogin';
import {Icon} from 'react-native-elements';
import SideStack from '../routes/sideStack';

const Stack = createStackNavigator();

function homeStack({navigation}) {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Login"
          component={Login}
          options={{headerShown: false}}
        />
        <Stack.Screen
          name="Register"
          component={Register}
          options={{headerShown: false}}
        />
        <Stack.Screen
          name="ResetPWD"
          component={ResetPWD}
          options={{headerShown: false}}
        />
        <Stack.Screen
          name="RegisterLogin"
          component={RegisterLogin}
          options={{headerShown: false}}
        />
        <Stack.Screen
          name="Welcome"
          component={Welcome}
          options={{
            title: 'Abulad',
            headerLeft: () => (
              <Icon
                name="comment"
                onPress={() => navigation.openDrawer()}
                title="Info"
                color="#000"
              />
            ),
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default homeStack;

App.js

import React, {Component} from 'react';
import SplashScreen from 'react-native-splash-screen';
import HomeStack from './src/components/routes/homeStack';
import SideStack from './src/components/routes/sideStack';

class App extends Component {
  componentDidMount() {
    SplashScreen.hide();
  }
  render() {
    return <HomeStack />;
  }
}

export default App;

在执行附加到应该将抽屉滑出的图标上的onPress方法时，出现此错误：