Reactjs 反应本机：加载图像后应用程序性能不佳

加载图像似乎没有问题。但在它们已加载后，会出现问题。

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

实际细节：

以本机方式与expo进行反应

需要将本地文件夹中的图像导入数组并导入该数组

单个图像大小在15KB到120KB之间，所有图像加在一起：3.1MB

用于显示图像的组件：

图像

（react原生简单图像组件）

使用

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} />

-Base
-容器
- 

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

我感觉到了您的痛苦

我发现你可以尝试提高性能的一件事是。要使用Expo实现这一点，请使用app.json中的

assetBundlePatterns

键提供项目目录中的路径列表：

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

另一种方法是使用一个替代包来渲染图像，而不是使用默认包。React Native的

Image

组件在很大程度上像浏览器一样处理图像缓存。很多时候，对于像您这样的用例，我已经注意到闪烁、从缓存加载的低性能以及总体上的低性能

因此，您可以尝试的是一个

图像

替换，它解决了这些问题。在引擎盖下面，FastImage是一个包裹，所以这就是秘密酱汁

您是否在

中渲染图像？如果是这样，我也会试一试。这是React Native的

组件的优化版本，用于删除视口之外的所有项目

---

如果没有其他帮助的话，我会选择低质量的缩略图，当它们在网格视图中都是40时。

我也有同样的问题。您可以尝试将FastImage与预加载一起使用。

---

同样的问题，即使只有3500 KB的图像，iPhone 6上的应用程序也会崩溃。感谢您提供清晰详细的答案。不幸的是，没有一个想法解决了性能问题，我将使用压缩的和不太漂亮的图像。不幸的是，根据我的经验，这是你能做的最好的。你也可以尝试用TinyPNG（或类似的东西）压缩你的图像，但我想你已经这样做了。有时，如果图像的分辨率太高，低质量的缩略图是唯一的选择。Expo不支持FastImage，因此这对OP没有帮助。