react-native
Android - Schaltfläche "Hardware zurück"

Erkennung der Rücktasten der Hardware in Android

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

Hinweis: this.onMainScreen() und this.goBack() sind keine Funktionen, sondern müssen auch implementiert werden. ( https://github.com/immidi/react-native/commit/ed7e0fb31d842c63e8b8dc77ce795fac86e0f712)

Beispiel für BackAndroid zusammen mit Navigator

Dies ist ein Beispiel für die Verwendung des BackAndroid React Native zusammen mit dem Navigator .

componentWillMount registriert einen Ereignis-Listener, um die Antippen der Zurück-Schaltfläche zu bearbeiten. Es prüft, ob eine andere Ansicht im Protokollstapel vorhanden ist, und falls vorhanden, wird zurückgegangen. Andernfalls wird das Standardverhalten beibehalten.

Weitere Informationen zu den BackAndroid Dokumenten und den Navigator Dokumenten .

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

Beispiel für die Erkennung der Rücktasten der Hardware mithilfe von BackHandler

Da ist BackAndroid veraltet. Verwenden Sie BackHandler anstelle von BackAndroid.

import { BackHandler } from 'react-native';

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

Hardware-Zurück-Tasten-Handhabung mit BackHandler und Navigationseigenschaften (ohne veralteten BackAndroid & veralteten Navigator)

Dieses Beispiel zeigt Ihnen eine Rückwärtsnavigation, die normalerweise in den meisten Flüssen erwartet wird. Je nach erwartetem Verhalten müssen Sie jedem Bildschirm den folgenden Code hinzufügen. Es gibt zwei Fälle:

1. Wenn sich mehr als ein Bildschirm im Stapel befindet, zeigt die Schaltfläche "Zurück" des Geräts den vorherigen Bildschirm an.
2. Wenn sich nur ein Bildschirm im Stapel befindet, wird die Zurück-Schaltfläche des Geräts die App beenden.

Fall 1: Vorherigen Bildschirm anzeigen

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

Wichtig: Vergessen Sie nicht, die Methode im Konstruktor zu binden und den Listener in componentWillUnmount zu entfernen.

Fall 2: App beenden

In diesem Fall müssen Sie nichts auf dem Bildschirm behandeln, an dem Sie die App beenden möchten.

Wichtig: Dies sollte nur Bildschirm auf Stapel sein.