Quiero implementar BackHandler para que se ejecute en un componente y mantener el comportamiento predeterminado del botón de retroceso del hardware 'ir a la pantalla anterior' en el resto de mi aplicación, tengo un componente llamado 'cases.js' Quiero salir del aplicación si el usuario hizo clic en el botón Atrás mientras este componente está en la pantalla y para navegar hacia atrás si el usuario está en cualquier otro componente, la pantalla de casos se coloca sobre la pantalla de Inicio de sesión.

Esto es lo que he intentado en el archivo 'cases.js':

  componentDidMount = async () => {

    await BackHandler.addEventListener('hardwareBackPress', this._closeApp())

  }

  componentWillUnmount = async () => {

    await BackHandler.removeEventListener('hardwareBackPress', this_closeApp());

  }

  _closeApp = async () => {

    BackHandler.exitApp();

  }

Pero sigue cerrando la aplicación de inmediato.

¿Cómo puedo lograr eso?

1
Abdul-Elah JS 10 sep. 2018 a las 13:35

3 respuestas

La mejor respuesta

Como todavía no puedo agregar comentarios, agregue a la respuesta de Mahdi Bashirpour, que es correcto:

componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
}

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
}

handleBackButton = () => {
    //add your code

    return true;
};

Este código funcionará, pero como notó, una vez que agregue EventListener en la pantalla de inicio de sesión, afectará a todas las otras pantallas más profundas en la pila que no sobrescriben BackHandler EventListener.

La mejor manera de resolver esto es agregar otra condición que verifique que esté en la pantalla de inicio de sesión:

handleBackButton = () => {
    if (screen == 'Login') {
    BackHandler.exitApp();
    return true;
    }
};

¿Cómo verificar en qué pantalla estás? Suponiendo que está utilizando React-Navigation, eche un vistazo aquí. Si tiene problemas para rastrear la pantalla actual, sugiero abrir un nuevo hilo.

4
Dror Bar 27 sep. 2018 a las 12:23

Agregue return true; al método _closeApp

_closeApp = async () => {

    // BackHandler.exitApp();

    return true;
}

Este enlace puede ayudarte mucho: React Native: presione dos veces hacia atrás para salir de la aplicación

0
Bashirpour 10 sep. 2018 a las 11:03
componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
}

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
}

handleBackButton = () => {
    //add your code

    return true;
};
0
Bashirpour 10 sep. 2018 a las 11:10