React Native - 图像加载非常缓慢，一点也不答案

【问题标题】：React Native - Images loading extremely slowly, not at allReact Native - 图像加载非常缓慢，一点也不
【发布时间】：2019-12-21 04:33:10
【问题描述】：

我正在使用 Expo/RN 创建一个应用程序，其中第一个屏幕加载了相当数量 (~20) 的图像，这是网络调用的结果。我只在 iOS 中工作。

我的问题是图像加载非常缓慢，大多数需要大约一分钟才能加载，有些从不加载但保持黑色。我正在使用内置的 Image 组件，并在源对象中提供了一个 url。当移动网站在 Safari 中加载时，图像会立即加载。

此外，内置缓存似乎根本不起作用。当图像已加载并应在多个位置显示时，它通常根本不会出现在第二个位置。我试过使用“force-cache”没有效果。

我尝试了 react-native-fast-image 包，它无法运行，以及 react-native-expo-image-cache，它给了我一些结果，但内存泄漏问题和 UI 冻结。

有什么解决办法吗？我应该只创建自己的缓存组件吗？

编辑：图像加载到 FlatList 中。每个项目都由一个自定义组件呈现，包括一个 .图片只是将 url 当作

<Image
    style={[styles.image, smallCell ? { width: smallCellWidth } : {}]}
    source={{ uri: project.imageUrl, cache: "force-cache" }}
    opacity={0.85}
/>

【问题讨论】：

我能看到加载图片的代码吗？
@hongdevelop 加了，不是很多
您说要装载 20 件。你如何加载它们？
@hongdevelop 只使用内置的 Image 组件
去掉调整宽度的代码是不是也一样？

标签： react-native expo react-native-ios

【解决方案1】：

事实证明，最大的问题不在于 RN 方面，而是使用的 API 调用。我正在从服务器下载原始大小的图像，而不是调整大小的图像，它们太大了，我得到了上述结果。

但是，使用 force-cache 确实对我有很好的效果。

【讨论】：

您是从服务器获取较小的图像还是在下载时调整它们的大小？如果是后者，你用什么来调整网络图像的大小？我只能找到压缩本地图像的RN图像操作器。
@cDub 我们的服务器有一个脚本可以在上传图片后调整图片大小，所以我只需要选择正确的图片即可。在 RN 方面没有做任何事情。