React本机本地映像加载缓慢

uz75evzq  于 2023-03-03  发布在  React
关注(0)|答案(5)|浏览(162)

我正在使用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像,我不知道该怎么做才能让它工作。

rhfm7lfc

rhfm7lfc1#

您可以安装新的依赖项
npm install react-native-fast-image并将图像更改为FastImage
如需参考,请访问以下网站:-https://www.npmjs.com/package/react-native-fast-image
此依赖项将增加映像的加载

ymzxtsji

ymzxtsji2#

"资产优化"也可以帮助您进行展示。您可以尝试以下命令来优化项目中的资产。

npm install -g sharp-cli
npx expo-optimize

谢谢!

vojdkbi0

vojdkbi03#

2023年答案:Expo刚刚发布了expo-image。快速突出显示一些显著功能:

  • 支持每种图像格式(Android上的ICNS除外)
  • 使用磁盘/内存缓存
  • 使用高性能的SDWebImage和Glide

这里有一个超级好的DX功能expo-image提到他们的博客:
它还包含常见图像模式的启示,这些模式通常需要为您的应用或其他库(占位符、过渡和模糊哈希支持)进行临时一次性实现。
以下是这些文档的链接:https://docs.expo.dev/versions/v48.0.0/sdk/image/
下面是其中一个开发人员的演示:https://twitter.com/i/status/1605240759342739456

zz2j4svz

zz2j4svz4#

请考虑以下步骤:
1.首先,我们需要确保您的图像大小不是很大,因为有时候您会发现一些应用程序(大多数是摄影应用程序,请查看this link)加载的图像大小为2MB或更大,这就是为什么它们加载速度慢的原因,但最佳的图像大小范围是100KB到400KB之间。
1.使用其中一个缓存库来提高加载时间的性能,如下所示:react-native-progressive-fast-imagereact-native-fast-image请注意这些软件包会消耗内存。
1.请注意内联样式和JSX回调,每次重新呈现它都会创建另一个回调引用和另一个样式对象(这对您的情况不是很有用,但它会增加一点JS线程的FPS)。

cqoc49vn

cqoc49vn5#

如果您正在使用来自react-native-elements的Image,则必须将transition属性设置为false。

<Image 
       source={require('../assets/images/iconT.jpg')}
       transition={false}
/>

相关问题