Solución:
Tuve casi el mismo problema con una tabnavegación como padre y una navegación de pila como secundaria y reorganizar mi capa de pantalla no era una opción. Entonces busqué otra solución y, a partir de los documentos, descubrí que la interfaz de usuario de navegación principal siempre se muestra en el niño. Pero los documentos también dieron un gran ejemplo sobre cómo cambiar un encabezado principal desde dentro de un niño. Así que tomé ese ejemplo y lo implementé para la visibilidad de la barra de pestañas. Así es como lo implementé.
Así que tengo una barra de pestañas de navegación con Inicio, Contactos y Más, y dentro de cada pestaña tengo una pila. La pantalla en la que oculto la barra de pestañas está en CameraView, y esa pantalla es una pantalla de pila en la pestaña Más.
- Hogar
- Contactos
- Más
- Perfil
- CameraView (aquí quiero ocultar la barra de pestañas)
Tabnavegación:
Como puede ver, obtengo la visibilidad de la barra de pestañas de un método.
<NavigationContainer>
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeNavigation} />
<Tab.Screen name="Contacts" component={ContactNavigation} />
<Tab.Screen
name="More"
component={MoreNavigation}
options={({ route }) => ({
tabBarVisible: this.getTabBarVisibility(route)
})}
/>
</Tab.Navigator>
</NavigationContainer>
Método getTabBarVisibility:
Aquí es donde verifico si el nombre de la ruta es CameraView que definí en StackNavigation.
getTabBarVisibility = (route) => {
const routeName = route.state
? route.state.routes[route.state.index].name
: '';
if (routeName === 'CameraView') {
return false;
}
return true;
}
Y el componente MoreNavigation:
Esta es mi navegación de pila para More, donde puede ver que el nombre de la pantalla es CameraView.
<Stack.Navigator initialRouteName="More">
<Stack.Screen name="More" component={More}/>
<Stack.Screen name="UserProfile" component={Profile}/>
<Stack.Screen name="CameraView" component={CameraView}/>
</Stack.Navigator>
Deberías intentar reorganizar tu capa de pantalla,
Original
- Barra de pestañas
- Estanque (pila)
- PondScreen
- DetailScreen
- Existencias
- Otros
En su lugar, intente colocar una pila superior
- TopStack
- Barra de pestañas
- PondScreen
- Existencias
- Otros
- Detalles
Eso debería poder ocultar la barra de pestañas inferior o el encabezado de la pestaña en cada pantalla
El truco consiste en agregar TabsStack, OtherStack o SomeOtherScreen dentro de su
<Stack.Navigator /> a través de <Stack.Screen />
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="TabsStack" component={TabsStack} />
<Stack.Screen name="SomeOtherScreen" component={SomeOtherScreen} />
<Stack.Screen name="OtherStack" component={OtherStack} />
</Stack.Navigator>
</NavigationContainer>
);
}
esta documentado aqui