反应原生：加载图像后应用程序性能不佳答案

【问题标题】：React native: Bad app performance after loading images反应原生：加载图像后应用程序性能不佳
【发布时间】：2020-07-17 12:13:48
【问题描述】：

加载图像似乎没有问题。但是它们已经加载后出现问题。

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

实用细节：

用 expo 反应原生
要求将本地图像文件夹放入一个数组并导入该数组。
单张图片大小在 15KB - 120KB 之间，所有图片加起来：3.1MB
用于显示图片的组件：Image（react native 简单图片组件）
使用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} />

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

【问题讨论】：

同样的问题，即使只有 3500 KB 的图像，应用程序在 iphone6 中崩溃

标签： reactjs image performance react-native expo

【解决方案1】：

我感觉到你的痛苦。

我发现可以尝试提高性能的一件事是bundling the image assets into your binary。要在 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 时选择质量较低的缩略图。

【讨论】：

感谢您提供清晰详细的答复。不幸的是，这些想法都没有解决性能问题，我将使用压缩和不太漂亮的图像。
不幸的是，根据我的经验，这是你能做的最好的。你也可以尝试用 TinyPNG（或类似的东西）压缩你的图像，但我想你已经这样做了。有时如果图像的分辨率太高，低质量的缩略图是唯一的选择。

【解决方案2】：

我遇到了同样的问题。您可以尝试使用带有预加载的 FastImage。
https://github.com/DylanVann/react-native-fast-image#fastimagepreload-source--void

【讨论】：

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