Tengo una aplicación React Native que usa React Navigation. La aplicación ya consta de un Navegador de pestañas que anida Navegadores de pila. Ahora, además, quería agregar una Navegación de cajón en el nivel más alto, mostrando un contenido de cajón personalizado.

Entonces, mi jerarquía sería DrawerNavigator (anidando el 1 TabNavigator)> TabNavigator (anidando 5 StackNavigators)> Stack Navigator (anidando el número individual de pantallas de contenido real).

Para lograr esto, agregué el Navegador de cajones en el nivel superior, anidando el Navegador de pestañas existente:

 <Drawer.Navigator initialRouteName="MainTabNav" drawerContent={props => <DrawerMenu {...props} />} screenOptions={{ headerShown: false, }}> <Drawer.Screen name="MainTabNav" component={MainTabNavigator} /> </Drawer.Navigator>

Aquí está mi problema ahora: cuando deslizo el dedo de izquierda a derecha, aparece el cajón y puedo ver mi componente de navegación de cajón personalizado siempre que deje el dedo en la pantalla. Cada vez que quito el dedo de la pantalla, el cajón de navegación se vuelve a cerrar automáticamente.

Además, llamar a navigation.dispatch(DrawerActions.openDrawer()) desde un Pressable dentro del Stack Navigator no hace nada: el cajón simplemente no se abrirá en absoluto.

 ... import {useNavigation} from '@react-navigation/native'; import {DrawerActions} from '@react-navigation/native'; const DrawerMenuButton = props => { const navigation = useNavigation(); return ( <Pressable onPress={() => { navigation.dispatch(DrawerActions.toggleDrawer()); }}> ...

¿Alguien tiene alguna idea para una solución a este problema?

Muchas gracias y un saludo The Smart Home Maker

PD: Mi configuración es la siguiente

 "react": "17.0.2", "react-native": "0.64.2", "@react-navigation/drawer": "^6.1.3", "@react-navigation/native": "^5.1.7", "@react-navigation/stack": "^5.2.14", "@react-navigation/bottom-tabs": "^5.5.2",