小编Chr*_*ian的帖子

如何防止React Native中的静态图像在iOS上异步地进行卡顿/加载

我无法在React Native中获取图像以便按我的意愿工作.

因为RN中的图像是在一个单独的线程中本地解码的,所以在每个单独的图像加载后,React Native会在不同的时间显示我的组件(背景图像,手柄,旋钮,滑块)中使用的图像 - 而不是显示整个组件什么时候准备好了.

我正在使用require方法来渲染图像:

<Image source={require('./component-bg.png')} />
<Image source={require('./handle.png')} />
<Image source={require('./track.png')} />
Run Code Online (Sandbox Code Playgroud)

如果加载几乎是立即的,那么这种异步加载是可以接受的.但即便是小图像似乎也在缓慢加载.这导致UI感觉非常不专业,直到所有图像都已加载给定组件.

有没有办法加快图像加载?包装UIImageView会更快(在XCode iOS项目中显示图像似乎是即时的).'uri'可以更快地在XCode中引用手动捆绑的图像吗?它对我来说并没有多大意义,为什么React Native在渲染图像方面要比普通iOS应用程序慢得多.此外,当我创建了一个组件的多个动态实例时 - 每次创建一个新组件时,图像似乎必须再次加载.

手动跟踪图像加载状态

当然,我可以手动跟踪每个单独图像的加载事件,并让组件容器视图的不透明度从0开始,然后在加载图像时动画最多为1.但对于这样的事情来说,这似乎过于复杂.

image ios react-native

23
推荐指数
2
解决办法
6803
查看次数

标签 统计

image ×1

ios ×1

react-native ×1