Javascript Can'；似乎无法从父堆栈导航器中打开子抽屉导航器

我读过一些关于堆栈溢出的例子，我认为我已经实现了解决方案，但是我仍然无法切换抽屉

下面是BataNavigator函数，它的末尾有一个抽屉组件

import React from "react";
import {createStackNavigator} from "@react-navigation/stack"
import {createDrawerNavigator} from "@react-navigation/drawer"

//Components
import Login from "../App/Views/Login"
import Categories from "../App/Views/Categories"
import UserProfile from "../App/Views/UserProfile"
import CreateAccount from "../App/Views/CreateAccount"
import BataBoard from "../App/Views/BataBoard"
import SideBar from "../App/Components/SideBar"
// import BataBoard from "../App/Views/BataBoard"


const BataStackNavigator = createStackNavigator();
const BataAuthNavigator = createStackNavigator();
const BataDrawerNavigator = createDrawerNavigator();

export const BataAuth = ()=> {
  return (
    <BataAuthNavigator.Navigator
      screenOptions={{
        headerShown: false
      }}
    >
    <BataAuthNavigator.Screen
      name={"LoginScreen"}
      component={Login}
    />
    <BataAuthNavigator.Screen
      name={"CreateAccountScreen"}
      component={CreateAccount}
    />
    </BataAuthNavigator.Navigator>
  )
}

 export const BataNavigator = ()=> {
  return (
    <BataStackNavigator.Navigator
      screenOptions={{
        headerShown: false
      }}
    >
      <BataStackNavigator.Screen
        name={"CategoriesScreen"}
        component={Categories}
      />
      <BataStackNavigator.Screen
        name={"UserProfileScreen"}
        component={UserProfile}
      />
      <BataStackNavigator.Screen
        name={"BataBoard"}
        component={BataBoard}
      />
        <BataStackNavigator.Screen
        name={"SideBarScreen"}
        component={BataDrawer}
      />
    </BataStackNavigator.Navigator>
  )
}

export const BataDrawer = ()=>{
  return (
    <BataDrawerNavigator.Navigator>
         <BataDrawerNavigator.Screen
        name={"Categories"}
        component={Categories}/>
         <BataDrawerNavigator.Screen
        name={"Logout"}
        component={Login}/>
    </BataDrawerNavigator.Navigator>
  )
}

我得到以下错误： “导航/打开抽屉”操作未由任何导航器处理

我还要补充一点，在根级别，我将所有内容包装在NavigationContainer中，如果这有什么不同的话

import React from "react";
import {useSelector} from "react-redux";
import {NavigationContainer} from "@react-navigation/native";

import {BataNavigator, BataAuth} from "./BataNavigation"


const AppNavigator = (props) =>{
    // token authentication goes here
    const isAuth = useSelector(state=>{return state.User.isAuthenticated})

    return( <NavigationContainer>
                {!isAuth &&
                    <BataAuth/>
                }
                {isAuth &&
                    <BataNavigator/>
                }
        </NavigationContainer>
    )
}

export default AppNavigator;

从“React”导入React；
从“react redux”导入{useSelector}；
从“@react-navigation/native”导入{NavigationContainer}”；
从“/BataNavigation”导入{BataNavigator，BataAuth}
常量AppNavigator=（道具）=>{
//这里是令牌身份验证
const isAuth=useSelector（状态=>{return state.User.isAuthenticated}）
报税表（
{！伊萨斯&&
}
{isAuth&&
}
)
}
导出默认AppNavigator；

import React from "react";
import {useSelector} from "react-redux";
import {NavigationContainer} from "@react-navigation/native";

import {BataNavigator, BataAuth} from "./BataNavigation"


const AppNavigator = (props) =>{
    // token authentication goes here
    const isAuth = useSelector(state=>{return state.User.isAuthenticated})

    return( <NavigationContainer>
                {!isAuth &&
                    <BataAuth/>
                }
                {isAuth &&
                    <BataNavigator/>
                }
        </NavigationContainer>
    )
}

export default AppNavigator;