React Native

【ReactNative】Androidの[◀︎戻る]ボタンによるコンポーネントの再マウントを防ぐ方法

React Native
この記事は約2分で読めます。

はじめに

アプリをバックグラウンドから復帰した際に、Androidだけコンポーネントが再マウントされることがあります。

conponentDidMountなど、ライフサイクルへの対応がReact(ReactNative)では重要ですが、iOSとAndroidで挙動が異なっていることがあるので注意が必要です。

戻るボタンによるバックグラウンド移行に注意

バックグラウンドへの移行操作には、主に3つの方法があります。

  • [■ボタン]を押す
  • [●ボタン]を押す
  • [◀︎ボタン]を押す(アプリ内で戻り先がない場合、アプリを閉じる)

最後の[◀︎ボタン]を押した場合、タスクは残っているのに復帰時にコンポーネントが再マウントされることがあります。

予期しないライフサイクルメソッドが起動したり、イベントリスナーが重複して登録されたり等、様々な弊害が考えられます。

再マウントを防ぐ方法

以下を追加することで、再マウントを防ぐことができます。

  • [◀︎ボタン]は必ずタスクをバックグラウンド移行する(タスクキルしない)

MainActivity.java

@Override
public void invokeDefaultOnBackPressed() {
    moveTaskToBack(true);
}
  • ひとつのタスクが複数のインスタンスを保持しないようにする

AndroidManifest.xml

<activity
    ...
    android:launchMode="singleTop">

まとめ

バックグラウンドへの移行時および復帰時に、バックグラウンドのスタックを使用するよう設定することで、予期しないコンポーネントの再マウントを防ぐことができます。

参考

ActivityのlaunchModeの効果的な使い方 - Qiita
launch Modeとは 文字通り、Activityの起動方法を指す。 具体的には4つのモードがあり、分け方としてはyanzm先生のブログによると intentに応対するActivityがどのタスクに保持されるか Act...
Android back button causes re-mounting of the root component · Issue #13775 · facebook/react-native
Description Upon putting the Android app into the background by using the hardware back button and then re-opening the app, the entire app gets re-initialised a...