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;
}