React Native中的圖像組件中的緩存問題

Question

在React Native中使用圖像組件顯示來自外部服務器的圖像。 但是如果我們使用相同的URI更改服務器中的圖像，則圖像不會更新。 如果我們使用查詢字符串作為URI，它將重新加載更新的圖像。 以下代碼有效

<Image
  style={styles.logo}
  source={{ uri: this.state.photoURL + '?' + new Date() }}
/>

上面的代碼是否為每次重新渲染都緩存圖像並占用內存？ React Image組件會默認緩存嗎？緩存如何在Image組件中工作？ 考慮到服務器中的緩存和更新后的圖像，在響應本機時處理圖像的最佳方法。

Answer 1

是的，上面的示例將在每次重新渲染組件時緩存一個新圖像。 它不會占用內存，它會占用手機上的存儲空間。

您可以在此處閱讀有關RN Image組件緩存的更多信息（當前僅iOS才支持緩存）： https : //facebook.github.io/react-native/docs/images#cache-control-ios-only

如果您想為Android擁有合適的圖像緩存解決方案，則需要使用第三方軟件包或編寫自己的解決方案。

---

就像您一樣，通常需要使用時間戳來管理緩存控制。 但是，您不會使用Date()動態生成時間戳並強制應用程序查找新圖像。

我假設您從某些API獲取圖像網址。 將上次更新圖像的時間戳記包括在響應中，因此this.state.photoURL已經自身具有?${lastUpdatedTimestamp} 。

或者讓API返回照片對象而不是照片url，如下所示：

{
  ...
  photo: {
    url: "https://someserver.com/some/image.png",
    updatedAt: "1569110591504"
  }
}

然后你可以做

<Image source={{ uri: `${requestData.photo.url}?${requestData.photo.updatedAt}` }} />