android - navigate - react native navigation header button

Manejo del botón Atrás en React Native, Navigator en Android

Question

Tengo un Navigator en una aplicación nativa Android reaccionar.

Estoy usando navigator.push() para navegar a una página diferente. Parecería natural que el botón de retroceso muestre el navegador y retroceda una página, pero eso no es lo que está sucediendo (se cierra la aplicación).

¿El Navigator nativo de Navigator realmente no tiene soporte para el botón de retroceso, tengo que conectarlo con un BackAndroid ?

Answer 1

Además de la respuesta anterior, el código de manejo debería ser algo como esto

var navigator; 

React.BackAndroid.addEventListener(''hardwareBackPress'', () => {
    if (navigator && navigator.getCurrentRoutes().length > 1) {
        navigator.pop();
        return true;
    }
    return false;
});

en el código de renderizado:

<Navigator ref={(nav) => { navigator = nav; }} />

Answer 2

No estoy seguro de cuándo cambió la API, pero a partir de 0.31 nativo (versiones potencialmente anteriores también) BackAndroid es un componente que debe importarse de react-native:

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

También asegúrese de eliminar el oyente en componentWillUnmount:

componentWillUnmount(){
    BackAndroid.removeEventListener(''hardwareBackPress'', () => {
        if (this.navigator && this.navigator.getCurrentRoutes().length > 1) {
            this.navigator.pop();
            return true;
        }
        return false;
    });
}

* ACTUALIZACIÓN: en reaccionar a 0.44 nativo este módulo ha sido renombrado a BackHandler . Navigator también se ha desaprobado oficialmente, pero aún se puede encontrar aquí: https://github.com/facebookarchive/react-native-custom-components

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

Answer 3

No te olvides de atar [esto]

La respuesta correcta debería ser:

export default class MyPage extends Component {
  constructor(props) {
    super(props)
    this.navigator = null;

    this.handleBack = (() => {
      if (this.navigator && this.navigator.getCurrentRoutes().length > 1){
        this.navigator.pop();
        return true; //avoid closing the app
      }

      return false; //close the app
    }).bind(this) //don''t forget bind this, you will remember anyway.
  }

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

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

  render() {
    return (
      <Navigator
        ref={navigator => {this.navigator = navigator}}
  ...

Answer 4

Para limpiar el código usando mi conocimiento y respuestas anteriores, así es como debería verse:

import { ..., Navigator, BackAndroid } from ''react-native'';

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

componentWillUnmount() {
  //Forgetting to remove the listener will cause pop executes multiple times
  BackAndroid.removeEventListener(''hardwareBackPress'', this.handleBack);
}

handleBack() {
  if (this.navigator && this.navigator.getCurrentRoutes().length > 1){
    this.navigator.pop();
    return true; //avoid closing the app
  }

  return false; //close the app
}

Answer 5

Sí, debes manejar el botón Atrás tú mismo. Creo que la razón principal para esto es que es posible que desee hacer cosas diferentes con el botón Atrás en lugar de simplemente retroceder en la pila. Sin embargo, no sé si hay planes para incorporar funcionalidad de botón de retroceso en el futuro.