react-native
Android - аппаратная кнопка возврата

Обнаружить нажатие кнопки «Назад» на Android

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

Примечание: this.onMainScreen() и this.goBack() не встроены в функции, вам также необходимо их реализовать. ( https://github.com/immidi/react-native/commit/ed7e0fb31d842c63e8b8dc77ce795fac86e0f712)

Пример BackAndroid вместе с Navigator

Это пример того, как использовать BackAndroid React Native вместе с Navigator .

componentWillMount регистрирует прослушиватель событий для обработки кранов на задней панели. Он проверяет, есть ли еще один вид в стеке истории, и если он есть, он возвращается - иначе, он сохраняет поведение по умолчанию.

Дополнительная информация о документах BackAndroid документах 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} />
        } />
    );
  }
};

Пример обнаружения кнопки с помощью BackHandler

Поскольку BackAndroid устарел. Используйте BackHandler вместо BackAndroid.

import { BackHandler } from 'react-native';

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

Управление обратными кнопками оборудования с использованием BackHandler и свойств навигации (без использования устаревших BackAndroid и устаревшего навигатора)

Этот пример покажет вам обратную навигацию, которая, как правило, ожидается в большинстве потоков. Вам нужно будет добавить следующий код на каждый экран в зависимости от ожидаемого поведения. Есть 2 случая:

1. Если на стеке больше 1 экрана, кнопка возврата устройства отобразит предыдущий экран.
2. Если в стеке всего 1 экран, кнопка «Назад» выйдет из приложения.

Случай 1: Показать предыдущий экран

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

Важно: Не забудьте связать метод в конструкторе и удалить прослушиватель в компонентеWillUnmount.

Случай 2: выход из приложения

В этом случае нет необходимости обрабатывать что-либо на этом экране, где вы хотите выйти из приложения.

Важно: это должен быть только экран на стеке.