react-native – 背景图像在本机反应中缓慢加载

发布时间：2020-12-15 16:21:17 所属栏目：百科来源：网络整理

导读：我用这样的背景图像 Image source={Images.workingBg} style={styles.container} {this.renderHeader(navigation)} {this.renderContent(navigation)}/Image 但图像显示缓慢,文本显示之前和图像显示,即使该图像被加载. 解决方法因为RN中的图像在单独的线程

我用这样的背景图像

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

但图像显示缓慢,文本显示之前和图像显示,即使该图像被加载.

enter image description here

解决方法

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

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

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

见：Off-thread Decoding

注意

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

解

尝试在设备上执行production build(完全发布版本)以查看它是否实际上是一个问题或仅仅是开发模式的副作用.

或者尝试从this issue开始的变通方法

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

并在您的render()函数中：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!