Estoy intentando crear una aplicación móvil que tenga un botón Atrás en la barra de navegación inferior. Tendré tres opciones en la barra de pestañas: Atrás, Inicio y Configuración. Inicio tiene 6 botones que conducen a diferentes pantallas. Cuando navego por estas pantallas, quiero que el botón Atrás funcione como lo hace el botón Atrás del encabezado predeterminado.

Como estoy usando varias pantallas, el botón Atrás no tiene historial de pila, por lo que la navegación.goBack() no funciona. Cuando verifico la navegación.canGoBack() devuelve el bit verdadero de navegación. El estado no está definido. Creo que se debe a que la pestaña inferior es la principal y no puede ver la pila de navegación de los elementos secundarios, pero no puedo encontrar una solución para esto.

He intentado anidar BottomTabNavigator dentro de StackNavigator y viceversa, pero no puedo hacerlo funcionar. No he encontrado soluciones en línea a pesar de que he buscado. He considerado crear una nueva pestaña inferior para cada pantalla para que el botón Atrás no sea un padre y esté en la pila correcta, pero no estoy seguro de que funcione y no es una codificación muy eficiente.

Puedo publicar mi código, pero no es muy útil ya que he estado probando muchas cosas diferentes.

Página de inicio: La imagen muestra mi página de inicio con la barra de navegación inferior. Quiero poder navegar a Medicamentos, luego navegar a otras pantallas dentro de medicamentos (como la que se muestra aquí: Medicamentos1 ) y poder usar el botón Atrás en la parte inferior izquierda como lo hace el botón Atrás predeterminado en el encabezado.

Utilicé este fragmento de código en los documentos de reactnavigation pero no funciona para navegar.goBack():

 <Tab.Screen name="Chat" component={Chat} listeners={({ navigation, route }) => ({ tabPress: (e) => { // Prevent default action e.preventDefault(); // Do something with the `navigation` object navigation.navigate('AnotherPlace'); }, })} />

Cualquier ayuda sería muy apreciada :)