如何防止React Native中的静态图像在iOS上异步卡顿/加载 [英] How to prevent Static Images in React Native from stuttering / loading asynchronously on iOS

问题描述

我无法在React Native中使图像按我的意愿工作.

I have trouble getting images in React Native to work as I want.

由于RN中的图像在单独的线程中进行本地解码，因此在加载每个单独的图像后，React Native会在不同时间显示在我的组件中使用的图像(背景图像，手柄，旋钮，滑块)-而不是显示整个组件都准备好了.

Because images in RN are decoded natively in a separate thread, React Native displays the images that are used in my components (background images, handles, knobs, sliders) at different times, after each individual image has loaded - instead of showing the whole component at once, when it's ready.

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

I'm using the require method to render the images:

<Image source={require('./component-bg.png')} />
<Image source={require('./handle.png')} />
<Image source={require('./track.png')} />

如果异步加载几乎是立即的，则可以接受此异步加载.但是，即使是很小的图像也似乎正在缓慢加载.这会导致UI感觉非常不专业，直到为给定组件加载所有图像为止.

This async loading would be acceptable if the loading was almost immediate. But even small images seem to be slowly loading. This leads to the UI feeling very unprofessional, up until the point where all images have loaded for a given component.

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

Is there any way to speed up the image loading? Would it be faster to wrap an UIImageView (image displaying in XCode iOS projects seems instant). Could 'uri' references to a manually bundled image in XCode be faster? It doesn't really make sense to me, why React Native would be so much slower at rendering images than regular iOS apps. Moreover, when I have multiple dynamic instances of a component created - the images seem to have to load again, every time a new component is created.

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

Of course, I could manually track each individual image's loading events, and let the opacity of the component's container view start at 0 and then animate up to 1 when the images were loaded. But this seems overly complicated for something like this.

推荐答案

为生产和开发而构建时，图像的加载方式有所不同.在开发过程中，图像将通过打包服务器通过HTTP提供，而在生产中，图像将与应用捆绑在一起.尝试在设备上进行生产构建，以查看这实际上是一个问题还是仅仅是开发模式的副作用.

Images are loaded differently when building for production and for development. During development the images will be served over HTTP from the packager server, whereas in production they will be bundled with the app. Try doing a production build on device to see if it's actually a problem or just a development mode side effect.

这篇关于如何防止React Native中的静态图像在iOS上异步卡顿/加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！