react-nativeのImageコンポーネントのURLキャッシュの挙動


割りと困ったので備忘録

Imageコンポーネントを利用すると自動でリクエストをキャッシュするようになっているのだけど, 初回リクエスト時に500を返しちゃうと以降ずっと500だと認識しちゃって正しく動作しない問題にぶち当たりました.

onError関数でエラーログを吐かせるとこんな感じに

The operation couldn’t be completed. (NSURLErrorDomain error 500.)

経緯としては

0.26以前は画像URLがリダイレクト(301||302)するものを利用していると正しく画像が読み込めないバグが有ってそれを踏んでしまい, その後0.26.2へ更新したら上記のバグが再現するようになりました.

現状Imageコンポーネントのキャッシュを削除するAPIがJavascriptでは生えてないので一度アプリを削除する必要がある.

これ開発している時に起きる分にはリセットで済むから良いのだけど, プロダクション環境で起きちゃうとユーザにアプリを再インストールする手間をかけさせちゃうから最悪だなー.

いちよトリックはあって, クエリにランダムな文字列を与えればいい.

ただ, これだと常にキャッシュされなくなってしまうので注意が必要だ…

<img src={/public/hoge.jpg?${Math.random()}}/>