加载图像似乎没有问题。但是在它们已经加载之后出现了问题
在我的应用程序中，我在整个游戏中一张接一张地加载卡片图像。一旦我加载了40张卡片图像，整个应用程序就会变得很慢。它总是发生在第40张图像上，当我在第40个图像后继续加载更多的卡图像时，每次加载图像后都会变慢。
实用细节：
- 与expo进行原生反应
- 要求图像从Local文件夹进入数组并导入该数组
- 单个图像大小在15KB到120KB之间，所有图像加在一起：3.1MB
- 用于显示图像的组件：
Image(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} />
有什么方法可以解决这个问题吗？我找不到任何关于加载图像后出现的问题的信息。
我感觉到你的痛苦。
我发现可以尝试提高性能的一件事是将图像资产绑定到二进制文件中。要使用Expo做到这一点，请使用app.json中的assetBundlePatterns键在项目目录中提供路径列表：
"assetBundlePatterns": [
"assets/images/*"
],
另一种方法是使用一个替代包来渲染图像，而不是默认包。React Native的Image组件在很大程度上像浏览器一样处理图像缓存。很多时候，对于像您这样的用例，我注意到闪烁、从缓存加载的低性能和一般的低性能。
所以你可以试试FastImage——一个Image的替代品，它可以解决这些问题。在引擎盖下面，FastImage是SDWebImage(iOS(和Glide(Android(的包装，所以这就是秘密酱汁。
你在<FlatList />中渲染图像吗？如果是这样的话，我也会尝试一下react原生优化的flatlist。这是React Native的<FlatList />组件的优化版本，它可以删除不在视口中的所有项目。
如果没有其他帮助的话，我会选择低质量的缩略图，当它们在网格视图中都是40时。
我遇到了同样的问题。您可以尝试在预加载的情况下使用FastImage
https://github.com/DylanVann/react-native-fast-image#fastimagepreload-来源——无效