【ReactNative開発】再レンダリングしても画像が更新されない

こんばんは。今日は、画像の扱いに関するトラブルシューティングです。

それでは参ります。

問題

ReactNativeのアプリで、画像を更新した後、更新後の画面を強制再レンダリングしても更新前の画像が表示され続けている。

前提として、画像のURLは、更新前後で変わらない作りになっている。

＜コード＞

import {Image} from 'react-native';
import { useIsFocused } from '@react-navigation/native';

・・・・
# 再レンダリング
useIsFocused;
・・・・

return(
・・・・
<Image style={styles.backgroundImage}
   source={{uri:画像のURL(https://xxxxxx)}}
/>
)

原因と解決方法

結論、画像のurlが変わるようにすれば期待動作となった。

Stack Overflowでもちょくちょくこの問題が議論されているのを見つけたのだが、以下の議論がわかりやすかった。どうやらデバイスのキャッシュに起因した動作みたい。

https://stackoverflow.com/questions/48392286/image-update-in-memory-wont-reflect-in-react-native-image-component

なお、以下では、Imageに値が変わるkeyプロパティを追加する方法が案内されていたが、こちらは試したところ動かなかった。

https://stackoverflow.com/questions/50186932/react-native-cant-rerender-image-after-state-change

が、画像のurlが毎回変わるようにすれば再レンダリングされるようになった。どうやってurlが変わるようにしたかというと、画像URLの末尾に無効なクエリパラメータを追加して、このパラメータに現在時刻を使うようにした。

コードだとこんな感じ。useIsFocusedで再レンダリングされた際に、現在時刻を取得し直して、それを画像URLの末尾にくっつけています。

import {Image} from 'react-native';
import { useIsFocused } from '@react-navigation/native';

・・・・
# 再レンダリング
useIsFocused;
・・・・

//追加！
const key = new Date().toLocaleString() //こちらはiOSでは動かなかったので下の実装に変更
const key = Date.now()

return(
・・・・
<Image style={styles.backgroundImage}
   source={{uri:画像のURL(https://xxxxxx)+"?"+key}} //追加
/>
)

余談ですが、Date().toLocaleString()を付与する方法は、Androidでは動くがiOSでは動かなかった。どうしてだろうと思って少しみてみると、どうやらDate().toLocaleString()で解決された日付のフォーマットがiOSとAndroidで微妙に異なっていた。それ以上突っ込んで見ていないが、Date.now()とすれば両方で動いたのでそちらに変更。

おしまい

[番外編] ReactNativeをもっと学ぶなら・・・

React Nativeをもっとちゃんと学びたい！という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・！

土台のJavaScript/TypeScriptに不安がある方は、こちらもまとめましたので、ご参考になりましたら幸いです。