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

BackHandler

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

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

  • いずれかの購読がtrueを返した場合、それより前に登録された購読は呼び出されません。
  • どの購読も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 オブジェクトを返します。このオブジェクトは NativeEventSubscription.remove メソッドを使用してクリアする必要があります。

React Navigationでの使用​

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

Backhandlerフック​

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

リファレンス

メソッド​

addEventListener()​

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

exitApp()​

tsx
static exitApp();