メインコンテンツへスキップ

BackHandler

BackHandler API は、戻るナビゲーションのためのハードウェアボタンの押下を検出し、システムの戻るアクションのイベントリスナーを登録し、アプリケーションがどのように応答するかを制御できます。これは Android 専用です。

イベントの購読は逆順に呼び出されます (つまり、最後に登録された購読が最初に呼び出されます)。

  • 1 つの購読が true を返した場合、それより前に登録された購読は呼び出されません。
  • 購読が 1 つも true を返さないか、または登録されていない場合、アプリを終了するためのデフォルトの戻るボタン機能をプログラムで呼び出します。
モーダルユーザーへの警告

アプリが開いた Modal を表示している場合、BackHandler はイベントを公開しません (Modal ドキュメントを参照)。

パターン​

tsx
const subscription = BackHandler.addEventListener(
  'hardwareBackPress',
  function () {
    /**
     * this.onMainScreen and this.goBack are just examples,
     * you need to use your own implementation here.
     *
     * Typically you would use the navigator here to go to the last state.
     */

    if (!this.onMainScreen()) {
      this.goBack();
      /**
       * When true is returned the event will not be bubbled up
       * & no other back action will execute
       */
      return true;
    }
    /**
     * Returning false will let the event to bubble up & let other event listeners
     * or the system's default back action to be executed.
     */
    return false;
  },
);

// Unsubscribe the listener on unmount
subscription.remove();

例​

以下の例は、ユーザーがアプリを終了したいかどうかを確認するシナリオを実装しています

BackHandler.addEventListener はイベントリスナーを作成し、NativeEventSubscription.remove メソッドを使用してクリアする必要がある NativeEventSubscription オブジェクトを返します。

React Navigation での使用​

React Navigation を使用して異なる画面間を移動している場合、カスタム Android 戻るボタンの動作に関するガイドに従うことができます。

Backhandler フック​

React Native Hooks には、イベントリスナーの設定プロセスを簡素化する優れた useBackHandler フックがあります。

リファレンス

Methods​

addEventListener()​

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

exitApp()​

tsx
static exitApp();