状態の永続化

アプリの再起動後、ユーザーがすぐに同じ場所に復帰できるように、アプリ内のユーザーの位置を保存したい場合があります。

これは、開発者がアプリをリフレッシュしたときに同じ画面にとどまることができるため、開発中には特に価値があります。

使用方法

ナビゲーション状態を永続化できるようにするには、コンテナの onStateChange プロパティと initialState プロパティを使用できます。

• onStateChange - このプロパティは、状態の変更を通知します。このコールバックで状態を永続化できます。
• initialState - このプロパティを使用すると、ナビゲーション状態に使用する初期状態を渡すことができます。このプロパティで復元された状態を渡すことができます。

import * as React from 'react';
import { Linking, Platform } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { NavigationContainer } from '@react-navigation/native';

const PERSISTENCE_KEY = 'NAVIGATION_STATE_V1';

export default function App() {
  const [isReady, setIsReady] = React.useState(Platform.OS === 'web'); // Don't persist state on web since it's based on URL
  const [initialState, setInitialState] = React.useState();

  React.useEffect(() => {
    const restoreState = async () => {
      try {
        const initialUrl = await Linking.getInitialURL();

        if (initialUrl == null) {
          // Only restore state if there's no deep link
          const savedStateString = await AsyncStorage.getItem(PERSISTENCE_KEY);
          const state = savedStateString
            ? JSON.parse(savedStateString)
            : undefined;

          if (state !== undefined) {
            setInitialState(state);
          }
        }
      } finally {
        setIsReady(true);
      }
    };

    if (!isReady) {
      restoreState();
    }
  }, [isReady]);

  if (!isReady) {
    return null;
  }

  return (
    <NavigationContainer
      initialState={initialState}
      onStateChange={(state) =>
        AsyncStorage.setItem(PERSISTENCE_KEY, JSON.stringify(state))
      }
    >
      {/* ... */}
    </NavigationContainer>
  );
}

開発モード

この機能は、開発モードで特に役立ちます。次のアプローチを使用して、選択的に有効にできます。

const [isReady, setIsReady] = React.useState(__DEV__ ? false : true);

本番環境でも使用できますが、特定の画面でアプリがクラッシュしている場合、アプリを再起動した後でもユーザーは同じ画面にとどまるため、アプリが使用できなくなる可能性があるため、注意して使用してください。

ローディングビュー

状態は非同期的に復元されるため、アプリは初期状態になる前に、しばらくの間空/ローディングビューをレンダリングする必要があります。これを処理するために、isReady が false の場合にローディングビューを返すことができます。

if (!isReady) {
  return <ActivityIndicator />;
}

警告: シリアライズ可能な状態

この機能が機能するためには、各パラメータ、ルート、およびナビゲーション状態が完全にシリアライズ可能である必要があります。通常、状態を JSON 文字列としてシリアライズします。つまり、ルートとパラメータには、関数、クラスインスタンス、または再帰的なデータ構造を含めることはできません。 React Navigation は、シリアライズ不可能なデータが発生した場合、すでに開発中に警告を表示するため、ナビゲーション状態を永続化する場合は、警告に注意してください。

コンテナに渡す前に、初期状態オブジェクトを変更できますが、initialState が有効なナビゲーション状態でない場合、React Navigation は状況を適切に処理できない場合があることに注意してください。