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

时间:2017-12-06 02:28:39

标签: image caching react-native

在我们的本机项目中,我们获得了图像网址,并在图像网址后附加了签名密钥。像http://my_bucket.s3.amazon.com/my_profile.jpg?signing_key=I_am_changeable_every_time一样。

我们将以上网址显示如下:

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

我们希望反应原生图像组件可以为我们处理图像缓存。虽然反应原生图像组件每次都会加载图像。一个可能的原因是react native图像组件并没有真正做任何缓存。

然后我们尝试找一些外部react-image-cache library

但据我了解,几乎所有的图像缓存库都将整个图像URL视为缓存键。如果我们的图像有一个随时间变化的signing_key参数

,我们该怎么办?

我们曾考虑使用 image_path 而不是 image_full_url 或我们的业务环境中的image_id作为缓存键。虽然我们没有找到任何可以提供这种能力的图书馆。

我的问题是:我们如何处理可更改的图片网址缓存,是否有您推荐的图书馆?

谢谢!

1 个答案:

答案 0 :(得分:0)

试试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
};