我正在使用React Native with Expo构建一个应用程序。除了图像之外，一切都很好，它们加载正确，但加载需要大约2秒，这很奇怪，因为所有的图像都是本Map像，它们也很轻，所以它们应该立即加载。这个问题也发生在我在Android设备上构建并获得.apk之后，所以图像总是存储在本地。
这是我的应用程序主页的一部分：
...
<View style={styles.bottomItem}>
<View style={styles.bottomItemInnerFirst}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('SecondPage')}>
<Image
source={require('../assets/images/iconT.jpg')}
style={{width: '100%', height: '100%'}}
resizeMode='contain'
/>
</TouchableOpacity>
</View>
</View>
...这个问题不仅发生在Image标签上，也发生在ImageBackground上。我已经看过这个文档了，但是我使用的是本Map像，我不知道该怎么做才能让它工作。
5条答案
按热度按时间rhfm7lfc1#
您可以安装新的依赖项
npm install react-native-fast-image并将图像更改为FastImage如需参考，请访问以下网站：-https://www.npmjs.com/package/react-native-fast-image
此依赖项将增加映像的加载
ymzxtsji2#
"资产优化"也可以帮助您进行展示。您可以尝试以下命令来优化项目中的资产。
谢谢!
vojdkbi03#
2023年答案：Expo刚刚发布了expo-image。快速突出显示一些显著功能：
这里有一个超级好的DX功能
expo-image提到他们的博客：它还包含常见图像模式的启示，这些模式通常需要为您的应用或其他库（占位符、过渡和模糊哈希支持）进行临时一次性实现。
以下是这些文档的链接：https://docs.expo.dev/versions/v48.0.0/sdk/image/
下面是其中一个开发人员的演示：https://twitter.com/i/status/1605240759342739456
zz2j4svz4#
请考虑以下步骤：
1.首先，我们需要确保您的图像大小不是很大，因为有时候您会发现一些应用程序（大多数是摄影应用程序，请查看this link）加载的图像大小为2MB或更大，这就是为什么它们加载速度慢的原因，但最佳的图像大小范围是100KB到400KB之间。
1.使用其中一个缓存库来提高加载时间的性能，如下所示：react-native-progressive-fast-image或react-native-fast-image，请注意这些软件包会消耗内存。
1.请注意内联样式和JSX回调，每次重新呈现它都会创建另一个回调引用和另一个样式对象（这对您的情况不是很有用，但它会增加一点JS线程的FPS）。
cqoc49vn5#
如果您正在使用来自react-native-elements的Image，则必须将transition属性设置为false。