expoで画像の表示速度が遅い時の対処法。対処法は画像をキャッシュする【expo】

画像を表示させるときに、S3やfirestorageなどにアップロードして、アプリ上に表示させるかと思います。

そしてexpoでは、渡されたURIを使ってアプリ内に表示させることが多いのではないでしょうか。

ただ、このようにすると、画像の表示速度が遅くなるという欠点があります。

今回は、画像の表示速度を改善するために、画像をキャッシュする方法について解説していきます。

画像をキャッシュするとは

通常画像をURIなどで表示させようと思うと、画像を表示させるまでに多少なりとも時間がかかります。

画像を端末内に保存しておくことで、通信せずに画像を表示する事ができ、表示速度が向上します。

キャッシュの有効期限は、expoアプリを完全に再起動した時までです。
再起動をすると、キャッシュはクリアされます。

画像をキャッシュする方法

expoで画像をキャッシュするには、専用のタグが準備されています。

まず、インストールしましょう。

npx expo install expo-image

次にインポートして使用していきます。

import { Image } from "expo-image";

<Image
     style={ styles.child }
     contentFit="cover"//写真の位置
     source="https://example.com"//写真のURLを記載
     cachePolicy="memory"//キャッシュの保存方法
/>

react-nativeにもImageタグがありますが、それとは違うので注意してくだささい。

このImageを書くだけで、自動的にキャッシュに画像がキャッシュに保存されます。

なので、アプリ起動中に２回目の表示をさせるとキャッシュから画像が呼び出されるようになります。

disk , memory , memory-disk　それぞれの利点

disk
データをデバイスのディスクに保存する方法です。
ファイルの永続性を持ち、アプリが再起動されてもデータが保持されます。

memory
データをデバイスのメモリ上に保存されます。
メモリキャッシュは高速にアクセスすることが可能なため、瞬時にデータを表示させる事ができます。

しかし、アプリがフォアグラウンドで実行されている時にのみ有効であり、アプリがバックグラウンドに移行されるとメモリキャッシュはクリアされます。

memory-disk
画像が最初に取得されると、それはメモリ内のキャッシュとディスク上に保存されます。
再度読み込む際には、メモリ内から取得されます。

もし、メモリ内にデータがない場合は、ディスクから呼び出されます。
ディスクが呼び出された後、メモリにも再度保存されます。
再度読み込まれた場合は、先ほどと同様にメモリ内から呼び出されます。

このようにすることで、メモリを効率的に使うことができます。

まとめ

今回は、画像をキャッシュして、より早くアプリ内に表示する方法について解説しました。

キャッシュを活用することでアプリ内の動作もより滑らかになります。

ぜひ活用してみてくださいね！では！