React Native（Expo）で端末の状態を気にすることは少ないです。
以前のカレイドツクールではOpenGL関係で復帰処理が必要でしたが、ライブラリで復帰直後に発火するイベントがあったためそれを使っていました。
今回はカメラのリロードが必要になったので復帰イベントを調べました。
AppState
ドキュメント：React Native、Expo(内容は一緒)
端末そのもののイベントは見つかりませんでした。
アプリがforegroundかbackgroundかというイベントをAppStateモジュールで取れたので代わりに使用します。なのでホームボタンやマルチタスクボタンを押したときや、そこから戻ったときにも反応します。
コードはサンプル通りで動きますが、私は関数コンポーネントで書いているのでuseEffectを使って書き直します。だいぶシンプルに書ける。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { AppState } from "react-native"; ... const { reload } = React.useContext(Context); const handleAppStateChange = nextAppState => { console.log(nextAppState); if (nextAppState == "active") reload(); }; React.useEffect(() => { AppState.addEventListener("change", handleAppStateChange); return () => AppState.removeEventListener("change", handleAppStateChange); }, []); ... |
ハンドラはuseCallbackやuseMemoとか使った方がいいんだろうかとも思いますが気にするほどの処理でもないので単純な関数のまま。
Androidだとスリープ時にbackground、起動・復帰時にactiveになります。
Contextにリロード用の関数を置いてそれを呼び出すようにしました。