首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何防止React Native中的静态图像在iOS上异步卡顿/加载

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

Stack Overflow用户
提问于 2015-12-15 00:44:47
回答 2查看 8.4K关注 0票数 23

我很难让React Native中的图像按我想要的方式工作。

因为RN中的图像是在单独的线程中进行本机解码的,所以React Native会在每个单独的图像加载后,在不同的时间显示我的组件中使用的图像(背景图像、手柄、旋钮、滑块),而不是在组件准备就绪时立即显示整个组件。

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

代码语言:javascript
复制
<Image source={require('./component-bg.png')} />
<Image source={require('./handle.png')} />
<Image source={require('./track.png')} />

如果加载几乎是即时的,则这种异步加载是可以接受的。但即使是小图像似乎也在缓慢加载。这会导致UI感觉非常不专业,直到加载了给定组件的所有图像。

有没有什么方法可以加速图像加载?包装一个UIImageView会不会更快(在XCode iOS项目中显示图像似乎是即时的)。在XCode中'uri‘引用手动捆绑的图片会更快吗?我真的不明白,为什么React Native在渲染图像时会比常规的iOS应用程序慢得多。此外,当我创建了一个组件的多个动态实例时-每次创建新组件时,图像似乎都必须再次加载。

手动跟踪图像加载状态

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

EN

回答 2

Stack Overflow用户

发布于 2017-06-14 05:48:20

为生产和开发而构建时,图像的加载方式不同。在开发期间,图像将通过HTTP从打包服务器提供,而在生产中,它们将与应用程序捆绑在一起。尝试在设备上进行生产构建,看看这是否真的是一个问题,或者只是开发模式的副作用。

票数 14
EN

Stack Overflow用户

发布于 2015-12-18 18:56:06

注意这里,https://facebook.github.io/react-native/docs/images.html#off-thread-decoding,我猜假设你的UI不会包含太多的图片作为背景。为这个用例打开一个问题。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34272286

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档