React-native：如何在 tvOS 中实现图像缓存？答案

【问题标题】：React-native: How to implement caching for image in tvOS?React-native：如何在 tvOS 中实现图像缓存？
【发布时间】：2017-09-25 10:21:36
【问题描述】：

React-native：如何在 tvOS 中实现图像缓存？

我想为我在互联网上下载的图像实现缓存，如何使用 Apple tv 来实现？我尝试了很多图书馆，但任何人都与苹果电视兼容

【问题讨论】：

标签： javascript reactjs react-native tvos apple-tv

【解决方案1】：

您必须使用AsyncStorage 手动进行缓存。使用AsyncStorage.setItem 添加必须缓存到存储中的对象，并使用AsyncStorage.getItem 取回对象。这两个函数都会返回 Promise。

// cache item
try {
  await AsyncStorage.setItem('@MyAppCache:myKey', myItem);
} catch {
  //couldn't cache item, handle it
}

// retrieve item from cache
try {
  const myItem = await AsyncStorage.getItem('@MyAppCache:myKey');
} catch {
  //didn't find item in cache, download from the internet
}

如果这看起来太低级了，那么 AsyncStorage 周围有一些非常好的包装器，例如 react-native-storage，它们提供了一些好处，例如设置缓存项目的到期日期、查询批处理和其他东西。

【讨论】：

感谢您的回答 :) 我如何将图像从 uri 提供给 AsyncStorage.setItem ？
以及如何将本地图像传递给图像组件？
您可以将图像作为 base64 字符串。只需执行AsyncStorage.setItem(key, base64) 即可将base64 字符串保存到AsyncStorage，React Native Image 组件支持通过将uri 属性设置为base64 字符串直接从base64 字符串显示图像。
谢谢 :) 我如何从我的图像中获取 base64 ？因为一些这样做的反应库与 tvOS 不兼容
最好将图片作为base64发送到服务器端。但是如果需要在客户端转换，可以使用this。

【解决方案2】：

React Native FS 现在与 tvOS see 兼容。所以现在你可以使用任何使用它的库了！

例如react-native-cacheable-image：

你需要安装并链接react-native-fs，只需输入：

npm install react-native-fs --save # install react-native-fs
react-native link react-native-fs #link native module

现在你可以安装react-native-cacheable-image:

npm i react-native-cacheable-image --save

像这样导入这个库：

import CacheableImage from 'react-native-cacheable-image'

现在您可以使用JSX 创建这样的图像：

 <CacheableImage
            style={{height:20}}
            source={{uri: "http://www.foobar.com/defaultImage.jpeg"}}
        >

您的设备有一些规格，请参阅react-native-cacheable-image 的文档

希望我的回答对你有帮助

【讨论】：