0
481
VistasOcultar encabezado en el navegador de pila Reaccionar navegación
Estoy tratando de cambiar de pantalla usando tanto la pila como el navegador de pestañas.
const MainNavigation = StackNavigator({ otp: { screen: OTPlogin }, otpverify: { screen: OTPverification}, userVerified: { screen: TabNavigator({ List: { screen: List }, Settings: { screen: Settings } }), }, });En este caso, se usa primero el navegador de pila y luego el navegador de pestañas. Quiero ocultar los encabezados del navegador de pila. Que no funciona correctamente cuando uso opciones de navegación como:
navigationOptions: { header: { visible: false } }Estoy probando este código en los dos primeros componentes que se usan en stacknavigator. si uso esta línea, aparece un error como:
3 Respuestas
Responde la pregunta0
ACTUALIZAR a partir de la versión 5
A partir de la versión 5, es el encabezado de opción que se headerShown en las opciones de screenOptions
Ejemplo de uso:
<Stack.Navigator screenOptions={{ headerShown: false }} > <Stack.Screen name="route-name" component={ScreenComponent} /> </Stack.Navigator>Si solo desea ocultar el encabezado en 1 pantalla, puede hacerlo configurando las opciones de pantalla en el componente de pantalla, vea a continuación, por ejemplo:
<Stack.Screen options={{headerShown: false}} name="route-name" component={ScreenComponent} />Ver también el blog sobre la versión 5
ACTUALIZAR
A partir de la versión 2.0.0-alpha.36 (2019-11-07),
hay una nueva opción de navegación: headershown
navigationOptions: { headerShown: false, }https://reactnavigation.org/docs/stack-navigator#headershown
https://github.com/react-navigation/react-navigation/commit/ba6b6ae025de2d586229fa8b09b9dd5732af94bd
respuesta antigua
Lo uso para ocultar la barra de la pila (observe que este es el valor del segundo parámetro):
{ headerMode: 'none', navigationOptions: { headerVisible: false, } }Cuando utilice este método, se ocultará en todas las pantallas.
En tu caso se verá así:
const MainNavigation = StackNavigator({ otp: { screen: OTPlogin }, otpverify: { screen: OTPverification }, userVerified: { screen: TabNavigator({ List: { screen: List }, Settings: { screen: Settings } }), } }, { headerMode: 'none', navigationOptions: { headerVisible: false, } } );0
En v4, simplemente use el siguiente código en la página en la que desea ocultar el encabezado
export default class Login extends Component { static navigationOptions = { header: null } }consulte Navegador de pila
0
En la solución dada, el encabezado está oculto para la pantalla de inicio por opciones = {{headerShown: false}}
<NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} options={{headerShown:false}}/> <Stack.Screen name="Details" component={DetailsScreen}/> </Stack.Navigator> </NavigationContainer>