React Native Image Cache 忽略图像 URL 的查询参数答案

【问题标题】：React Native Image Cache Ignore the Query Params for Image URLReact Native Image Cache 忽略图像 URL 的查询参数
【发布时间】：2018-05-19 20:06:51
【问题描述】：

在我们的 react native 项目中，我们得到了带有签名密钥的图像 url 附加在图像 url 之后。喜欢http://my_bucket.s3.amazon.com/my_profile.jpg?signing_key=I_am_changeable_every_time。

我们将上面的网址显示如下：

<ImageView source={{ uri: photo.uri }} />

我们希望原生图像组件能够为我们处理图像缓存。而反应原生图像组件每次都会加载图像。一个可能的原因是 React Native Image 组件并没有真正做任何缓存的事情。

然后我们试图找到一些外部的react-image-cache library。

但据我了解，几乎所有的图像缓存库都会将整个图像 url 视为缓存键。如果我们的图像有一个会随时间变化的signing_key参数，我们该怎么办

我们曾考虑在我们的业务上下文中使用 image_path 而不是 image_full_url 或 image_id 作为缓存键。虽然我们还没有找到任何可以为我们提供这种能力的库。

我的问题是：我们如何处理可变的图像 url 缓存，有没有你推荐的库？

谢谢！

【问题讨论】：

标签： image caching react-native

【解决方案1】：

试试react-native-cached-image。您可以告诉它忽略查询参数。

type ImageCacheManagerOptions = {
  headers: PropTypes.object,                      // an object to be used as the headers when sending the request for the url. default {}

  ttl: PropTypes.number,                          // the number of seconds each url will stay in the cache. default 2 weeks

  useQueryParamsInCacheKey: PropTypes.oneOfType([ // when handling a URL with query params, this indicates how it should be treated:
    PropTypes.bool,                               // if a bool value is given the whole query string will be used / ignored
    PropTypes.arrayOf(PropTypes.string)           // if an array of strings is given, only these keys will be taken from the query string.
  ]),                                             // default false

  cacheLocation: PropTypes.string,                // the path to the root of the cache folder. default the device cache dir 

  allowSelfSignedSSL: PropTypes.bool,             // true to allow self signed SSL URLs to be downloaded. default false
};

【讨论】：