React Native で、AndroidのBackボタンの動作を制御する

React Nativeで、AndroidのBackボタンで前画面に戻るのを止めたり、確認画面を表示したりする場合にどうすれば最も美しいのかが、人によって言ってることがばらばらだったのでメモ。

環境はReact Native 0.60＋Expo＋React Navigationでテストしていますが、React Native自体の機能なのでほかの環境でも動作するはず。

BackHandlerを使うべし

　BackHandlerは、React Native本体の機能で、AndroidやtvOSのバックボタン＝戻るボタンのイベントを処理できるようにするイベントハンドラー。

　取り扱いが簡単で、React Navigationなどもこのハンドラーの動作に準拠して動作してくれるので、安心して使えます。

使い方

　Backボタンを制御したいコンポーネントコード（関数ではなくクラス化しておくこと）に、以下の順にコードを入れる。

１．BackHandlerをインポート

import { BackHandler } from "react-native";

２．処理を担当するメソッドを追加

  handleBackButton() {
    alert("Hardware back button pressed.")
    return true;    // true: prevent the back action.
  }

ここでtrueを明確に戻していますが、これにより前画面に戻るなど、後に続く処理を抑制しています。falseを戻すと（または何も戻さないと）続く動作を邪魔しません。

３．componentWillMount()にて、上のメソッドを呼ぶイベントリスナーを登録。

  componentWillMount() {
    alert("will mount");
    this.backHandler = BackHandler.addEventListener("hardwareBackPress", this.handleBackButton);
  }

４．componentWillUnmount()にて、コンポーネントがなくなるときにイベントリスナーを解除

  componentWillUnmount(){
    alert("will unmount");
    this.backHandler.remove();
  }

おまけ

BackHandler.exitApp()でアプリを中断できます。