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

Question

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

因为 RN 中的图像是在单独的线程中本地解码的，React Native 在加载每个单独的图像后，在不同的时间显示我的组件中使用的图像(背景图像、 handle 、旋钮、 slider )——而不是显示整个组件准备就绪后立即完成。

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

<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 应用程序慢得多。此外，当我创建了一个组件的多个动态实例时 - 每次创建新组件时，图像似乎都必须重新加载。

手动跟踪图片加载状态

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

Answer 1

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