背景图像在本机反应中加载缓慢 [英] Background image load slowly in react native

问题描述

我使用这样的背景图像

<Image
  source={Images.workingBg}
  style={styles.container}
>
  {this.renderHeader(navigation)}
  {this.renderContent(navigation)}
</Image>

但是图片显示很慢，文字显示在之前，图片显示在之后，即使该图片已加载.

But image display slowly, text show before and image show after that even though that image is loaded.

推荐答案

因为 RN 中的图像在单独的线程中本地解码.

Because images in RN are decoded natively in a separate thread.

图像解码可能需要超过一帧的时间.这是网络上丢帧的主要来源之一，因为解码是在主线程中完成的.

Image decoding can take more than a frame-worth of time. This is one of the major sources of frame drops on the web because decoding is done in the main thread.

因此 RN 在解码组件中使用的图像时显示多帧的占位符，然后在每个单独的图像加载后在不同时间显示它们(而不是等待然后在它准备好时立即显示整个组件).

So RN displaying the placeholder for a few more frames while it is decoding the images used in components, then show them at different times after each individual image has loaded (instead of waiting then show the whole component at once when it's ready).

参见:线程外解码

注意

图像在开发/调试和实际"生产中不同地加载.在本地调试期间，图像将从打包服务器通过 HTTP 提供，而在生产中，它们将与应用程序捆绑在一起.

Images are loaded differently in development/debugging and "real" production. During local debugging the images will be served over HTTP from the packager server, whereas in production they will be bundled with the app.

解决方案

尝试进行生产构建(完整版本build) 在设备上查看它实际上是一个问题还是只是开发模式的副作用.

Try doing a production build (full release build) on device to see if it's actually a problem or just a development mode side effect.

或者尝试从这个问题

componentWillMount() {
    this.image = (<Image source={require('./background.png')} />);
}

并在您的 render() 函数中:

render() {
    return(
        <View>
            {this.image}
        </View>
    );
}

这篇关于背景图像在本机反应中加载缓慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！