React Native：加载图像后应用程序性能差

Question

加载图像似乎没有问题，但在它们加载完成后存在问题。

我的应用程序中，在整个游戏过程中逐个加载卡片图像。一旦我加载了40张卡片图片，整个应用程序就变慢了。这总是发生在第40张图像处，当我继续加载更多卡片图像时，每次加载后速度都会变慢。

实际细节:

1. 使用expo的React Native
2. 从本地文件夹导入图像到一个数组中并进行引入
3. 单个图像大小在15KB - 120KB之间，所有图像大小合计：3.1MB
4. 用于显示图像的组件: Image（React Native简单图像组件）
5. 使用Array.map来显示所有图像

将所有图像替换为300KB的糟糕图像-使应用程序运行快速，没有任何问题

所需导入的数组:

const CardsUris = [
  {uri:require('../assets/AC.png'), key:'AC'},
  {uri:require('../assets/AD.png'), key:'AD'},
  {uri:require('../assets/AH.png'), key:'AH'},
  {uri:require('../assets/AS.png'), key:'AS'}...
]

组件树结构：

- Base
    - Container
        - <Image source={CardsUris[index].uri} />

有没有办法解决这个问题？在加载图像后出现这样的问题，我找不到任何相关的信息。

- Ravid

---

即使只面临3个500 KB的图像，该应用程序在iPhone6上仍会崩溃，问题依旧。 - Gaurav Roy

Answer 1

我理解你的痛苦。

我发现可以尝试提高性能的一件事是将图像资源捆绑到二进制文件中。为此，使用Expo，可以在app.json中使用assetBundlePatterns关键字来提供项目目录中路径列表： （参见链接）。

"assetBundlePatterns": [
  "assets/images/*"
],

另一种方法是使用替代包来呈现图像而不是默认的包。React Native的Image组件处理图像缓存，就像浏览器一样。在许多情况下，我注意到像您这样的用例出现了闪烁、低性能加载和低性能等问题。

因此，您可以尝试使用FastImage——解决这些问题的Image替代品。在底层，FastImage是SDWebImage（iOS）和Glide（Android）的包装器，这就是秘密酱汁。

您是否在<FlatList />中呈现图像？如果是这样，我也会尝试使用react-native-optimized-flatlist。这是React Native的<FlatList />组件的优化版本，它删除了不在视口内的每个项目。

如果其他方法都无法解决问题，我会选择在40张网格视图中使用较低质量的缩略图。

- Kaloyan Kosev

---

感谢您提供明确详细的答案。不幸的是，这些解决方案都没有解决性能问题，因此我将使用压缩和外观较差的图片。 - Ravid

很遗憾，根据我的经验，那已经是你能做的最好的了。你也可以尝试使用TinyPNG（或类似的工具）压缩图像，但我猜你已经这样做过了。有时候，如果图像的分辨率太高，降低质量的缩略图可能是唯一的选择。 - Kaloyan Kosev

Answer 2

我曾经遇到过同样的问题。你可以尝试使用 FastImage 进行预加载。
https://github.com/DylanVann/react-native-fast-image#fastimagepreload-source--void

- CR7

---

Expo不支持FastImage，所以这对OP的情况没有帮助。 - Joel Rummel