react-native
Android - Hardware knop Terug

Detecteer hardware-knopdrukken in Android

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

Opmerking: this.onMainScreen() en this.goBack() zijn geen ingebouwde functies, u moet deze ook implementeren. ( https://github.com/immidi/react-native/commit/ed7e0fb31d842c63e8b8dc77ce795fac86e0f712)

Voorbeeld van BackAndroid samen met Navigator

Dit is een voorbeeld van het gebruik van React Native's BackAndroid samen met de Navigator .

componentWillMount registreert een gebeurtenislistener om de tikken op de terugknop af te handelen. Het controleert of er een andere weergave in de geschiedenisstapel is en als die er is, gaat deze terug - anders blijft het standaardgedrag behouden.

Meer informatie over de BackAndroid documenten en de Navigator documenten .

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

Voorbeeld van detectie van hardwareknoppen met BackHandler

Aangezien BackAndroid is verouderd. Gebruik BackHandler in plaats van BackAndroid.

import { BackHandler } from 'react-native';

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

Behandeling van hardwareknoppen met BackHandler en navigatie-eigenschappen (zonder verouderde BackAndroid en verouderde Navigator)

In dit voorbeeld wordt terugnavigatie getoond die in het algemeen in de meeste stromen wordt verwacht. Afhankelijk van het verwachte gedrag moet u de volgende code aan elk scherm toevoegen. Er zijn 2 gevallen:

1. Als er meer dan 1 scherm op de stapel staat, geeft de knop Terug van het apparaat het vorige scherm weer.
2. Als er slechts 1 scherm op de stapel staat, verlaat de apparaat-terugknop de app.

Geval 1: Toon vorig scherm

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

Belangrijk: vergeet niet de methode in de constructor te binden en de luisteraar in componentWillUnmount te verwijderen.

Geval 2: App afsluiten

In dit geval hoeft u op dat scherm niets af te handelen waar u de app wilt afsluiten.

Belangrijk: dit mag alleen scherm op stapel zijn.