Deshabilitar el botón Atrás en la navegación de reacción

este problema se puede resolver de diferentes formas, pero en este caso te enseñamos la respuesta más completa en nuestra opinión.

Solución:

1) Para hacer desaparecer el botón Atrás en react-navigation v2 o posterior:

navigationOptions:  
    title: 'MyScreen',
    headerLeft: null

2) Si desea limpiar la pila de navegación:

Suponiendo que se encuentra en la pantalla desde la que desea navegar:

Si está utilizando la versión v5 o posterior de react-navigation puedes usar navigation.reset o CommonActions.reset:

 // Replace current navigation state with a new one,
 // index value will be the current active route:

navigation.reset(
  index: 0,
  routes: [ name: 'Profile' ],
);

Fuente y más información aquí: https://reactnavigation.org/docs/navigation-prop/#reset

O:

navigation.dispatch(
  CommonActions.reset(
    index: 1,
    routes: [
       name: 'Home' ,
      
        name: 'Profile',
        params:  user: 'jane' ,
      ,
    ],
  )
);

Fuente y más información aquí: https://reactnavigation.org/docs/navigation-actions/#reset

Para versiones anteriores de react-navigation:

v2-v4 usar StackActions.reset(...)

import  StackActions, NavigationActions  from 'react-navigation';

const resetAction = StackActions.reset(
  index: 0, // <-- currect active route from actions array
  actions: [
    NavigationActions.navigate( routeName: 'myRouteWithDisabledBackFunctionality' ),
  ],
);

this.props.navigation.dispatch(resetAction);

v1 usar NavigationActions.reset

3) Para Android, también deberá deshabilitar el botón de retroceso del hardware usando BackHandler:

http://reactnative.dev/docs/backhandler.html

o si quieres usar ganchos:

https://github.com/react-native-community/hooks#usebackhandler

de lo contrario, la aplicación se cerrará al presionar el botón Atrás del hardware de Android si la pila de navegación está vacía.

¿Has considerado usar this.props.navigation.replace( "HomeScreen" ) en vez de this.props.navigation.navigate( "HomeScreen" ).

De esta manera no estás agregando nada a la pila. por lo que HomeScreen no agitará nada para volver si se presiona el botón Atrás en Android o si se desliza la pantalla hacia la derecha en IOS.

Más información consultar la Documentación. Y, por supuesto, puede ocultar el botón Atrás configurando headerLeft: null en navigationOptions

Puede ocultar el botón Atrás usando left:null, pero para los dispositivos Android aún se puede volver atrás cuando el usuario presiona el botón Atrás. Debe restablecer el estado de navegación y ocultar el botón con left:null

Aquí están los documentos para restablecer el estado de navegación:
https://reactnavigation.org/docs/navigation-actions#reset

Esta solución funciona para react-navigator 1.0.0-beta.7sin embargo left:null ya no funciona para la última versión.

Sección de Reseñas y Valoraciones

Si te animas, tienes la libertad de dejar un escrito acerca de qué te ha gustado de esta reseña.

---

---

Utiliza Nuestro Buscador