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 예제

React Native의 BackAndroid 를 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는 더 이상 사용되지 않습니다. BackAndroid 대신 BackHandler를 사용하십시오.

import { BackHandler } from 'react-native';

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

BackHandler 및 탐색 속성을 사용하는 하드웨어 백 버튼 처리 (더 이상 사용되지 않는 BackAndroid 및 deprecated Navigator 사용하지 않음)

이 예제는 대부분의 플로우에서 일반적으로 예상되는 뒤로 탐색을 보여줍니다. 예상되는 동작에 따라 다음 코드를 모든 화면에 추가해야합니다. 2 가지 경우가 있습니다 :

1. 스택에 두 개 이상의 화면이있는 경우 장치 뒤로 버튼은 이전 화면을 표시합니다.
2. 스택에 화면이 하나만있는 경우 기기 뒤로 버튼이 앱을 종료합니다.

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

중요 : 생성자에서 메서드를 바인딩하고 componentWillUnmount에서 리스너를 제거하는 것을 잊지 마십시오.

사례 2 : 앱 종료

이 경우 앱을 종료 할 화면에서 아무 것도 처리 할 필요가 없습니다.

중요 : 이 화면은 스택에만 표시해야합니다.