本机反应：加载图像后应用程序性能不佳 [英] React native: Bad app performance after loading images

问题描述

加载图像似乎没有问题。但在加载后出现问题。

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

实用细节：

1. 与世博会进行本机反应
2. 需要将本地文件夹中的图像放入数组并导入该数组。
3. 单个镜像大小在15KB-120KB之间，所有镜像一起：3.1MB
4. 图片展示组件：Image(反应原生简单图片组件)
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} />

有没有解决此问题的方法？我找不到有关加载图像后出现的此类问题的任何内容。

推荐答案

我能感受到您的痛苦。

我发现可以尝试提高性能的一件事是bundling the image assets into your binary。要使用EXPO执行此操作，请使用app.json中的assetBundlePatterns键提供项目目录中的路径列表：

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

另一种方法是使用替代包来呈现图像，而不是默认的包。Reaction Native的Image组件在很大程度上像浏览器一样处理图像缓存。对于像您这样的用例，我多次注意到闪烁、从缓存加载低性能以及总体低性能。

因此，您可以尝试FastImage-解决这些问题的Image替换。在引擎盖下面，FastImage是SDWebImage (iOS)和Glide (Android)的包装器，所以这就是秘诀。

是否在<FlatList />中渲染图像？如果是这样的话，我也会给react-native-optimized-flatlist一个机会。这是Reaction Native的<FlatList />组件的优化版本，可删除不在视区内的所有项目。

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

这篇关于本机反应：加载图像后应用程序性能不佳的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！