navigating - La prevención de hardware botón de retroceso de Android para React Native

react navigation screens

Question

Quiero evitar que el usuario vuelva a la pantalla anterior. Así que agregué código, pero esto no funciona. ¿Hay alguna solución para esto? Se muestra la ventana emergente de alerta, pero "devolver falso" no funciona.

componentDidMount() {
   BackAndroid.addEventListener(''hardwareBackPress'', () => {
     Alert.alert("alert","alert")

      this.props.navigator.pop();

       return false;
   });

Answer 1

Al hacer clic en el botón Atrás del hardware, se devuelve la llamada de devolución de llamada OnBackPressed

simplemente puede eliminar la súper declaración en la devolución de llamada onBackPressed.

 @Override
    public void onBackPressed() {

    }

Answer 2

Debe devolver verdadero , si desea deshabilitar el comportamiento predeterminado del botón de retroceso.

Aquí hay un componente de muestra que evitará que el usuario vuelva a la pantalla anterior.

import React, {Component,} from ''react'';
import {
    View,
    Text,
    BackHandler,
    ToastAndroid,
} from ''react-native'';

class BackButtonDemo extends Component {
    componentDidMount() {
        BackHandler.addEventListener(''hardwareBackPress'', this.handleBackButton);
    }

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

    handleBackButton() {
        ToastAndroid.show(''Back button is pressed'', ToastAndroid.SHORT);
        return true;
    }

    render() {
        return (
            <View>
                <Text>Back button example</Text>
            </View>
        );
    }
}

module.exports = BackButtonDemo;

Nota: También elimine ''this.props.navigator.pop ();'' de su solución. La función emergente Navigator llevará al usuario a la pantalla anterior representada por Navigator.

Answer 3

Deshabilito mi botón Atrás (android) para toda la aplicación agregando este código en App.js

componentDidMount() {
  BackAndroid.addEventListener(''hardwareBackPress'', this.handleBackButton);
}

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

handleBackButton() {
  return true;
}

No te olvides de importar BackAndroid

import {BackAndroid} from ''react-native''

Answer 4

Pruebe este botón Desactivar atrás simplemente regresando verdadero

import {BackAndroid} from ''react-native'';

componentWillMount() {
   BackAndroid.addEventListener(''hardwareBackPress'', () => {return true});
} 

Answer 5

Si está utilizando react-natigation que necesita usar BackHandler lugar de BackAndroid

import { BackHandler } from ''react-native'';

// code

componentDidMount() {
  BackHandler.addEventListener(''backPress'');
}

// some more code

componentWillUnmount() {
  BackHandler.removeEventListener(''backPress'');
}

Answer 6

Solo para darte una respuesta completa al utilizar react-navigation :

Si está utilizando react-navigation, coloque lo siguiente en su clase de RootNavigation, no en App.js, para deshabilitar el botón de retroceso para toda la aplicación.

import { BackHandler } from ''react-native'';

componentDidMount() {
    BackHandler.addEventListener(''hardwareBackPress'', this.onBackButtonPressed);
}

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

onBackButtonPressed() {
    return true;
}