react-native - 从底部单击时如何使抽屉从右侧滑动

Question

function TabNavigator() {
    return(
        <Tab.Navigator 

      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === 'Home') {
            iconName = focused
              ? require('./Src/Images/home.png')
              : require('./Src/Images/newhome.png') ;
          } else if (route.name === 'Pay') {
            iconName = focused 
              ? require('./Src/Images/quickpay.png')
              : require('./Src/Images/quickpay.png')  ;
          }else if (route.name === 'SpeedTest') {
            iconName = focused 
              ? require('./Src/Images/speed.png')
              : require('./Src/Images/speedtest.png')  ;
           }
           else if (route.name === 'MenuTab') {
            iconName = focused 
              ? require('./Src/Images/category.png')
              : require('./Src/Images/category.png')  ;
              
          }

          // You can return any component that you like here!
          return <Image source={iconName} style={{width: 25 , height: 25}}
           resizeMode="contain"/>;
        },
      })}
      tabBarOptions={{
        activeTintColor: 'red',
        inactiveTintColor: 'gray',
      }}
    >
      
        <Tab.Screen name="Home" component={HomeStack} />
        <Tab.Screen name="pay" component={payStack} />
        <Tab.Screen name="SpeedTest" component={speedtestStack} />
        <Tab.Screen name="MenuTab" component={DrawerNavigator} />
        
      </Tab.Navigator>

    )
}

const Drawer = createDrawerNavigator();
function DrawerNavigator() {
    return(
        <Drawer.Navigator initialRouteName="MenuTab"
        // drawerContent={props => CustomDrawerContent(props)}
        >
        <Drawer.Screen name="MenuTab" component={TabNavigator}  />
        <Drawer.Screen name="Profile" component={ProfileScreen} />
        <Drawer.Screen name="Recharge" component={RechargeScreen} />
        <Drawer.Screen name="Support" component={ComplainStack} />
        <Drawer.Screen name="Notification" component={NotificationScreen} />
        <Drawer.Screen name="Logout" component={LogoutScreen} />
      </Drawer.Navigator>
    )
}

const StackComplain = createStackNavigator();
function ComplainStack() {
    return(
        <Stack.Navigator initialRouteName="Support">
            <StackComplain.Screen name="Support" component={SupportScreen} options={{headerShown: false}}/>
            <StackComplain.Screen name="Complain" component={ComplainScreen} options={{headerShown: false}}/>
        </Stack.Navigator>
    )
}


const StackApp = createStackNavigator();
export default function App() {
  return (
    <NavigationContainer >
        {/* <CustomHeader/> */}
        <Stack.Navigator initialRouteName="Splash">
            <StackApp.Screen name="Splash" component={Splash} options={{headerShown: false}} />
            <StackApp.Screen name="Middle" component={MiddleScreen} options={{headerShown: false}}/>
            <StackApp.Screen name="HomeApp" component={DrawerNavigator} options={{headerShown: false}} />
            <StackApp.Screen name="Login" component={LoginScreen} options={{headerShown: false}}/>
            <StackApp.Screen name="Register" component={RegisterScreen} options={{headerShown: false}}/>
        </Stack.Navigator>
       </NavigationContainer>
  );
}

我想从右向左滑动并在底部导航中制作菜单选项卡......这是我的代码

---

我正在查看当前的屏幕截图 ==第一个屏幕截图 第二个屏幕截图

在当前的第二个屏幕截图中，当我按下菜单选项卡时，它没有打开抽屉屏幕，它是从顶部菜单按钮打开的......如何让它从底部菜单选项卡打开......