Saltar al contenido

Ocultar encabezado en el navegador de pila React navigation

Solución:

ACTUALIZAR a partir de la versión 5

A partir de la versión 5 es la opción headerShown en 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

Utilizo esto 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 su 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,
  }
 }
);

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 Stack Navigator

Simplemente agregue esto en su fragmento de código de clase / componente y el encabezado se ocultará

 static navigationOptions = { header: null }
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *