React Native 存储图像以供离线使用

Question

我的 React Native 应用程序从包含一组对象的 API 接收数据（产品），每个对象都有一个图片链接。有一个选项可以下载所有产品以供离线查看（我正在使用redux-persist + realm），但问题是图片本身不仅仅下载了它们的链接。 什么是我下载图片以便将它们附加到相应产品的最佳方式？

Answer 1

有多种方法可以做到这一点，通过手动方式，您可以使用来自 API 响应的地址将所有图像下载为 base64。你应该使用 JavaScript 来下载它们，让我们看看 JavaScript base64 下载：

const imageLink = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';

fetch(imageLink)
  .then(res => res.blob())
  .then(data => {
    const reader = new FileReader();
    reader.readAsDataURL(data);
    reader.onloadend = () => {
      const base64data = reader.result;
      console.log(base64data); // you can store it in your realm
    };
  });

下载每个图像后，将其存储在您的 realm 本地数据库中，并在使用时从 realm 调用它。

还有其他方法，例如使用库捕获图像。喜欢react-native-cached-image。