1
0

More than 1 year has passed since last update.

Androidのバックボタンで何も起こらない挙動を実現する方法

Posted at

実装に至ったきっかけ

私は実務でモバイルアプリの開発を担当しているのですが、その際にAndroidのバックボタンの制御がだるいな…と思っていました。
特に認証が絡んだ部分の処理で、「バックボタンで戻られるとちょっとややこしいことになるな…」と感じていました。そこでリーダーに相談したところ、「じゃあバックボタンを押しても何も起こらないようにしよう」と言われたことで、実装に至りました。

参考にしたサイト

ReactNativeの公式ドキュメントですね。BackHandlerがあることを実装するまで知りませんでした。

公式ドキュメントには、こう書かれています。

If one subscription returns true, then subscriptions registered earlier will not be called.
If no subscription returns true or none are registered, it programmatically invokes the default back button functionality to exit the app.

日本語訳すると、「あるサブスクリプションが true を返すと、それ以前に登録されたサブスクリプションは呼び出されません。サブスクリプションが true を返さない場合、または何も登録されていない場合、アプリを終了するためにデフォルトのバックボタン機能をプログラムで呼び出します。」となっています。

つまり、trueを返すと自分で設定したバックハンドラーのアクションが呼び出され、falseを返すとデフォルトのバックハンドラーの挙動(恐らく1つ前に戻る?)となります。

実装方法

以下が、公式ドキュメントに載っていたコードです。

back.js
import React, { useEffect } from "react";
import { BackHandler, Alert } from "react-native";

const App = () => {
  useEffect(() => {
    const backAction = () => {
      Alert.alert("Hold on!", "Are you sure you want to go back?", [
        {
          text: "Cancel",
          onPress: () => null,
          style: "cancel"
        },
        { text: "YES", onPress: () => BackHandler.exitApp() }
      ]);
      return true;
    };

    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      backAction
    );

    return () => backHandler.remove();
  }, []);

バックボタンを押した際に、「Hold on!, Are you sure you want to go back?」とアラートを表示するようになっています。キャンセルを押すとnull、つまり何もなし。YESを押すと、BackHandler.exitApp()なので、これはアプリを終了するという挙動になります。

じゃあ、バックボタンを押した時に何も起こらない(アラートも表示させない)ようにするには…と考えた私のコードがこちら。

back2.js
import React, { useEffect } from "react";
import { BackHandler, Alert } from "react-native";

const App = () => {
  useEffect(() => {
    const backAction = () => {
      return true;
    };

    const backHandler = BackHandler.addEventListener(
      "hardwareBackPress",
      backAction
    );

    return () => backHandler.remove();
  }, []);

trueを返さないままだと、falseが返ってデフォルトのバックハンドラーの処理が走ってしまいます。
「じゃあtrueだけ返してみたら良いんじゃね?」と思って書いたコードになります。これで、バックボタンを押しても何も起こらなくなりました。
ちなみに、hardwareBackPressという名前は何でも良いみたいです。

最後に

正直自分のやり方が正しいのかはわかりません。有識者の方、ベストプラクティスがあればご教授いただきたいです。
最後までお読みいただきありがとうございました!

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0