React Native: manejo del botón Atrás del dispositivo

Te sugerimos que revises esta resolución en un entorno controlado antes de pasarlo a producción, un saludo.

Solución:

Este ejemplo le mostrará la navegación hacia atrás que generalmente se espera en la mayoría de los flujos. Deberá agregar el siguiente código a cada pantalla según el comportamiento esperado. Hay 2 casos: 1. Si hay más de 1 pantalla en la pila, el botón Atrás del dispositivo mostrará la pantalla anterior. 2. Si solo hay 1 pantalla en la pila, el botón Atrás del dispositivo saldrá de la aplicación.

Caso 1: Mostrar pantalla anterior

import  BackHandler  from 'react-native';

constructor(props) 
    super(props)
    this.handleBackButtonClick = this.handleBackButtonClick.bind(this);


componentWillMount() 
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);


componentWillUnmount() 
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);


handleBackButtonClick() 
    this.props.navigation.goBack(null);
    return true;

Importante: No olvide vincular el método en el constructor y eliminar el oyente en componenteWillUnmount.

Caso 2: Salir de la aplicación

En este caso, no es necesario manejar nada en esa pantalla donde desea salir de la aplicación.

Importante: Esto debería ser solo una pantalla en la pila.

En ganchos de reacción

import  BackHandler  from 'react-native';

function handleBackButtonClick() 
    navigation.goBack();
    return true;
  

  useEffect(() => 
    BackHandler.addEventListener('hardwareBackPress', handleBackButtonClick);
    return () => 
      BackHandler.removeEventListener('hardwareBackPress', handleBackButtonClick);
    ;
  , []);

 import  BackHandler  from 'react-native';
  
 constructor() 
        super();           
        this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
 

   componentWillMount() 
       BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
   

   componentWillUnmount() 
       BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
   

   handleBackButtonClick() 
       //this.props.navigation.goBack(null);
       BackHandler.exitApp();
       return true;
   

   handleBackButtonClick() 
       return true;   // when back button don't need to go back 
   

En Componente Funcional

import  BackHandler  from 'react-native';

function handleBackButtonClick() 
    navigation.goBack();
    return true;
  

  useEffect(() => 
    BackHandler.addEventListener('hardwareBackPress', handleBackButtonClick);
    return () => 
      BackHandler.removeEventListener('hardwareBackPress', handleBackButtonClick);
    ;
  , []);

---

---

Utiliza Nuestro Buscador