react-native
Android - Bouton Retour de matériel

Détecter le bouton Retour du matériel dans Android

BackAndroid.addEventListener('hardwareBackPress', function() {
    if (!this.onMainScreen()) {
        this.goBack();
        return true;
    }
    return false;
});

Remarque: this.onMainScreen() et this.goBack() ne sont pas des fonctions intégrées, vous devez également les implémenter. ( https://github.com/immidi/react-native/commit/ed7e0fb31d842c63e8b8dc77ce795fac86e0f712)

Exemple de BackAndroid avec Navigator

Voici un exemple d'utilisation de BackAndroid React Native avec le Navigator .

componentWillMount enregistre un écouteur d'événement pour gérer les taps sur le bouton arrière. Il vérifie s'il y a une autre vue dans la pile d'historique, et s'il en existe une, elle reprend le comportement par défaut.

Plus d'informations sur les documents BackAndroid et les documents Navigator .

import React, { Component } from 'react'; // eslint-disable-line no-unused-vars

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

import SceneContainer from './Navigation/SceneContainer';
import RouteMapper from './Navigation/RouteMapper';

export default class AppContainer extends Component {

  constructor(props) {
    super(props);

    this.navigator;
  }

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

  renderScene(route, navigator) {
    this.navigator = navigator;

    return (
      <SceneContainer
        title={route.title}
        route={route}
        navigator={navigator}
        onBack={() => {
          if (route.index > 0) {
            navigator.pop();
          }
        }}
        {...this.props} />
    );
  }

  render() {
    return (
      <Navigator
        initialRoute={<View />}
        renderScene={this.renderScene.bind(this)}
        navigationBar={
          <Navigator.NavigationBar
            style={{backgroundColor: 'gray'}}
            routeMapper={RouteMapper} />
        } />
    );
  }
};

Exemple de détection de bouton retour matériel à l'aide de BackHandler

Depuis BackAndroid est obsolète. Utilisez BackHandler au lieu de BackAndroid.

import { BackHandler } from 'react-native';

{...}
  ComponentWillMount(){
    BackHandler.addEventListener('hardwareBackPress',()=>{   
      if (!this.onMainScreen()) {
        this.goBack();
        return true;
      }
      return false;
    });
  }    

Gestion du bouton retour du matériel à l'aide de BackHandler et des propriétés de navigation (sans utiliser BackAndroid et Navigateur obsolète obsolètes)

Cet exemple vous montrera la navigation qui est généralement attendue dans la plupart des flux. Vous devrez ajouter le code suivant à chaque écran en fonction du comportement attendu. Il y a 2 cas:

1. S'il y a plus d'un écran sur la pile, le bouton Retour de l'appareil affichera l'écran précédent.
2. S'il n'y a qu'un écran sur la pile, le bouton Retour du périphérique quittera l'application.

Cas 1: Afficher l'écran précédent

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

Important: n'oubliez pas de lier method in constructor et de supprimer listener dans componentWillUnmount.

Cas 2: application de sortie

Dans ce cas, pas besoin de manipuler quoi que ce soit sur cet écran où vous souhaitez quitter l'application.

Important: Ceci ne devrait être qu'un écran sur la pile.