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

Question

我使用像这样的背景图像

thing<decltype(&foo::process), &foo::process>

但是图像显示缓慢，文本显示之前和图像显示，即使该图像被加载。

Answer 1

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

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

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

请参阅：Off-thread Decoding

注意

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

<强>解决方案

尝试在设备上执行production build（完整版本构建）以查看它实际上是一个问题还是仅仅是开发模式的副作用。

或者尝试this issue

中的解决方法

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

并在render()函数中：

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