React Native: manejo del botón de retroceso del dispositivo

Solución:

Este ejemplo le mostrará la navegación hacia atrás que se espera generalmente 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 de retroceso del dispositivo mostrará la pantalla anterior. 2. Si solo hay 1 pantalla en la pila, el botón de retroceso 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 componentWillUnmount.

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 la pantalla en la pila.

En reaccionar ganchos

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