React Native - 将 base64 编码图像转换为 URI答案

【问题标题】：React Native - Convert base64 encoded image to URIReact Native - 将 base64 编码图像转换为 URI
【发布时间】：2020-06-22 10:44:34
【问题描述】：

我持有一个包含 base64 编码图像数据作为状态的对象列表，因此我可以在列表组件中向用户显示它们。像这样的：

[
    {
        id: "23789373",
        address: "92 West Sunnyslope Street Woodhaven, NY 11421",
        thumbnail: "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYA...",
    },
    {
        id: "91501148",
        address: "62 North St Severn, MD 21144",
        thumbnail: "yblAAAAHElEQVQI12P4//8/w38GE0DHxljNB...",
    },
    //...
]

问题是，base64 编码的数据似乎太长了，所以在拥有大约 5 个对象后，应用程序开始变慢。

我发现有人在 React-Redux 应用程序上遇到与我相同的问题，写了 medium article。她是这样解释的：

大量数据会不必要地使您的状态变得混乱，所有这一切都是因为您将完整的 base64 图像存储在您的存储中。当我使用这种方法只是为了“完成它”时，我很快意识到我的调试经验已经失控了。在一位同事的支持下，我们开始使用这个名为 createObjectURL 的漂亮小东西。这样做是创建一个包含引用图像的 URL 的 DOMString。这样，在我们的商店中，我们可以简单地保存这个普通的类似 URL 的引用，而不是一个巨大的数据块！

由于 React Native 中没有 createObjectURL 方法，有没有办法可以将图像存储在内存中，并使用 URI 作为状态？

【问题讨论】：

标签： react-native base64

【解决方案1】：

RNFS.writeFile?

import RNFS from 'react-native-fs';

RNFS.writeFile(RNFS.CachesDirectoryPath + '/a.jpeg', base64, 'base64')

// RNFS.CachesDirectoryPath + '/a.jpeg'

【讨论】：

【解决方案2】：

在我过去的经历中，我也遇到过类似的挑战，根据我的最终结论，使用 base64 处理多个图像会很麻烦。

即使你可以显示它，

var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANS...';
<Image style={{width: 50, height: 50}} source={{uri: base64Icon}}/>

但是拥有 1000 张图片会导致问题，并且会有以下挑战：

手机对 RAM 和处理器速度有限制。在平面列表中发送 100 个 base64 图像并进行渲染会显着降低手机和应用的速度，因此不建议这样做。
您的应用在这种情况下会消耗大量内存，并且需要相应地快速处理手机内存 - 所以不推荐
您的整体 UI/UX 会非常糟糕，好像应用程序很慢并且没有原生的感觉，您的评分和下载量都会下降。

因此，最好将后端的图像托管在 cloudinary 等中，然后在 thumbnail 中发送 URI 而不是整个 base64。

希望对您有所帮助。如有疑问，请随意

【讨论】：