在本机反应中背景图片加载缓慢

Question

我使用这样的图像作为背景

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

但是，即使该图像已加载，图像显示仍然缓慢，文本之前显示，之后图像显示。

Answer 1

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

图像解码可能会花费超过一帧的时间。这是Web上丢帧的主要来源之一，因为解码是在主线程中完成的。

因此，RN在解码组件中使用的图像时会显示更多的占位符，然后在加载每个单个图像后的不同时间显示它们（而不是等待，直到准备就绪时立即显示整个组件）。

另请：线程外解码

注意

在开发/调试和“实际”生产中，图像加载方式有所不同。在本地调试期间，映像将通过打包服务器通过HTTP提供，而在生产中，映像将与应用捆绑在一起。

解

尝试在设备上进行生产构建（完全发布构建），以查看这实际上是一个问题还是仅仅是开发模式的副作用。

或尝试解决此问题的方法

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

并在您的render()职能：

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