我正在尝试创建一个堆栈导航，抽屉导航和底部标签导航。我的堆栈导航和底部标签导航工作正常，但不能使抽屉导航。你能告诉我我错过了什么吗？它似乎我抽屉导航和标签导航有冲突，在我的代码...但找不到原因？？？请帮助。

我的应用程序.js

import 'react-native-gesture-handler';
import * as React from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator, DrawerContentScrollView,DrawerItemList,DrawerItem, } from '@react-navigation/drawer';  
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './src/screens/HomeScreen';
import FeedScreen from './src/screens/FeedScreen';
import Cards from './src/screens/CardScreen';
import ProfileScreen from './src/screens/ProfileScreen';
import Message from './src/screens/MessagesScreen';


function DetailsScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
  <Text>Details!</Text>
</View>
 );
}

function SettingsScreen({ navigation }) {
 return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
  <Text>Settings screen</Text>
  <Button
    title="Go to Cards"
    onPress={() => navigation.navigate('Cards')}
   />
 </View>
  );
}

const HomeStack = createNativeStackNavigator();

function HomeStackScreen() {
return (
<HomeStack.Navigator initialRouteName="Home">
  <HomeStack.Screen name="Home" component={HomeScreen}  />
  <HomeStack.Screen name="FeedScreen" component={FeedScreen} />
  <HomeStack.Screen name="Message" component={Message} />
</HomeStack.Navigator>
 );
}

const SettingsStack = createNativeStackNavigator();
function SettingsStackScreen() {
return (
<SettingsStack.Navigator>
  <SettingsStack.Screen name="Settings" component={SettingsScreen} />
  <SettingsStack.Screen name="Cards" component={Cards} />
</SettingsStack.Navigator>
);
}

const ProfileStack = createNativeStackNavigator();
function ProfileStackScreen(){
 return (
  <ProfileStack.Navigator>
   <ProfileStack.Screen name="Profile" component={ProfileScreen}/>
   {/* <ProfileStack.Screen name="Cards" component={Cards}/> */}
 </ProfileStack.Navigator>
 )
}

const Drawer = createDrawerNavigator();
function MyDrawer() {
 return (
  <Drawer.Navigator screenOptions={{ drawerPosition: 'left' }}>
   <Drawer.Screen name="Home" component={HomeScreen} />
   <Drawer.Screen name="Message" component={Message} />
  </Drawer.Navigator>   
  );
 }

const Tab = createBottomTabNavigator();
export default function App() {
  return (
   <NavigationContainer>
    <Tab.Navigator screenOptions={{ headerShown: false }}>
     <Tab.Screen name="Home" component={HomeStackScreen} />
     <Tab.Screen name="Settings" component={SettingsStackScreen} />
     <Tab.Screen name="Profile" component={ProfileStackScreen} />        
    </Tab.Navigator>
   </NavigationContainer>
  );
}