BackHandler

Backhandler API는 안드로이드 기기에서 뒤로 가기 버튼을 감지하고, 시스템의 뒤로 가기 동작에 대한 이벤트 리스너를 등록하며, 앱이 어떻게 반응할지 제어할 수 있는 기능을 제공한다.

이벤트 구독은 역순으로 호출된다. 즉, 가장 마지막에 등록한 구독이 가장 먼저 호출된다.

• 하나의 구독이 true를 반환하면, 이전에 등록한 구독은 호출되지 않는다.
• 어떤 구독도 true를 반환하지 않거나 구독이 등록되지 않았다면, 기본 뒤로 가기 버튼 기능을 실행해 앱을 종료한다.

모달 사용자 주의: 앱에서 Modal이 열려 있는 상태라면, BackHandler는 어떤 이벤트도 발생시키지 않는다. (Modal 문서 참조)

패턴

tsx

BackHandler.addEventListener('hardwareBackPress', function () {
  /**
   * this.onMainScreen과 this.goBack은 예제일 뿐,
   * 여기서는 여러분의 구현 방식을 사용해야 한다.
   *
   * 일반적으로 네비게이터를 사용해 이전 상태로 돌아간다.
   */

  if (!this.onMainScreen()) {
    this.goBack();
    /**
     * true를 반환하면 이벤트가 더 이상 전파되지 않고,
     * 다른 뒤로 가기 동작이 실행되지 않는다.
     */
    return true;
  }
  /**
   * false를 반환하면 이벤트가 계속 전파되고,
   * 다른 이벤트 리스너나 시스템의 기본 뒤로 가기 동작이 실행된다.
   */
  return false;
});

예제

다음 예제는 사용자가 앱을 종료하려는지 확인하는 시나리오를 구현한 것이다:

BackHandler.addEventListener는 이벤트 리스너를 생성하고, NativeEventSubscription.remove 메서드를 사용해 제거해야 하는 NativeEventSubscription 객체를 반환한다.

React Navigation과 함께 사용하기

React Navigation을 사용해 여러 화면 간에 이동한다면, 커스텀 안드로이드 뒤로 가기 버튼 동작 가이드를 참고한다.

BackHandler 훅

React Native Hooks는 이벤트 리스너를 설정하는 과정을 단순화해주는 유용한 useBackHandler 훅을 제공한다.

레퍼런스

메서드

addEventListener()

tsx

static addEventListener(
  eventName: BackPressEventName,
  handler: () => boolean | null | undefined,
): NativeEventSubscription;

exitApp()

tsx

static exitApp();

removeEventListener()

tsx

static removeEventListener(
  eventName: BackPressEventName,
  handler: () => boolean | null | undefined,
);