Typescript 在react native上的堆栈导航旁边使用抽屉导航器

我目前正在我的应用程序上使用堆栈导航，但我想在其中添加一个抽屉菜单。 当我尝试添加时，我的应用程序上的当前导航容器出现冲突问题

我应该把抽屉放在哪里？在我的App.tsx上，在我的routes.ts上？或者像组件一样使用它

这是我的app.tsx：

export default function App() {
    const [fontsLoaded] = useFonts({
        Comfortaa_300Light,
        Comfortaa_400Regular,
        Comfortaa_500Medium,
        Comfortaa_600SemiBold,
        Comfortaa_700Bold,
    });

    if (!fontsLoaded) {
        return null;
    }
    return (
        <Routes/>
    );
}

导出默认函数App（）{
const[fontsLoaded]=使用字体({
舒适的灯光，
康福特，
ComfortaAA_500中等，
ComfortaAA_600半黑体，
ComfortaAA_700Bold，
});
如果（！fontsLoaded）{
返回null；
}
返回(
);
}

我像这样插入抽屉：

export default function App() {
    const [fontsLoaded] = useFonts({
        Comfortaa_300Light,
        Comfortaa_400Regular,
        Comfortaa_500Medium,
        Comfortaa_600SemiBold,
        Comfortaa_700Bold,
    });

    if (!fontsLoaded) {
        return null;
    }
    const Drawer = createDrawerNavigator();
    function CustomDrawerContent(props) {
        return (
            <DrawerContentScrollView {...props}>
                <DrawerItemList {...props} />
                <DrawerItem
                    label="Close drawer"
                    onPress={() => props.navigation.closeDrawer()}
                />
                <DrawerItem
                    label="Toggle drawer"
                    onPress={() => props.navigation.toggleDrawer()}
                />
            </DrawerContentScrollView>
        );
    }
    function MyDrawer() {
        const Drawer = createDrawerNavigator();

        return (
            <Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>
                <Drawer.Screen name="Home" component={Welcome}/>
                <Drawer.Screen name="Map" component={IncidentsMap}/>
                <Drawer.Screen name="CreateIncident" component={SelectIncidentLocation}/>
            </Drawer.Navigator>
        );
    }

    return (
        /*<Routes/>*/

        <NavigationContainer>
            <MyDrawer/>
        </NavigationContainer>
    );
}

导出默认函数App（）{
const[fontsLoaded]=使用字体({
舒适的灯光，
康福特，
ComfortaAA_500中等，
ComfortaAA_600半黑体，
ComfortaAA_700Bold，
});
如果（！fontsLoaded）{
返回null；
}
const Drawer=createDrawerNavigator（）；
功能CustomDrawerContent（道具）{
返回(
props.navigation.closeDrawer（）}
/>
props.navigation.toggleDrawer（）}
/>
);
}
函数MyDrawer（）{
const Drawer=createDrawerNavigator（）；
返回(
}>
);
}
返回(
/**/
);
}

这是我的路由文件：

export default function Routes() {
    return(
        <NavigationContainer>
            <Navigator screenOptions={{headerShown: false}}>
                {/*<Screen name="GetLocationTest" component={GetLocationTest}/>*/}
                <Screen name="WelcomePage" component={WelcomePage}/>
                <Screen name="WelcomePageStep2" component={WelcomePageStep2}/>
                <Screen name="IncidentsMap" component={IncidentsMap}/>
                <Screen name="IncidentDetails"
                        component={IncidentDetails}
                        options={{
                            headerShown: true,
                            header: () => <Header showCancel={false} title="Incidente"/>
                        }}
                />
                <Screen name="SelectIncidentLocation" component={SelectIncidentLocation}
                        options={{
                            headerShown: true,
                            header: () => <Header title="Selecione no Mapa" showCancel={false}/>
                        }}
                />
                <Screen name="IncidentData" component={IncidentData}/>
            </Navigator>
        </NavigationContainer>
    )
}

导出默认函数路由（）{
返回(
{/**/}
}}
/>
}}
/>
)
}

我设法在App.tsx中插入了抽屉，但当我尝试在按钮中使用导航时出现了一些冲突，我收到

任何导航器都没有处理带有效负载的“导航”操作。

。

---

是否有一种方法可以插入抽屉菜单并仍然能够使用当前的导航系统？

您可以在抽屉导航器旁边添加堆栈导航器

Route.js

export default function Routes() {
return(
        <NavigationContainer>
           <Navigator screenOptions={{headerShown: false}}>
             <Screen name={'MyDrawer'} component={MyDrawer}/>
             //rest of your routes
           </Navgator>
        </NavigationContainer>
}

---

谢谢这就解决了。

navigation.navigate('MyDrawer')