React Native 中背景图片加载缓慢

Question

我使用以下方式将图像作为背景：

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

虽然图片已经加载，但图片显示很慢，文字先显示，然后才是图片。

- Hoai Truong

---

你如何知道图片已经加载完成？它需要多长时间才能显示出来？ - nhoxbypass

我确定图片已被加载，因为我在登录之前异步加载了它。但是当我登录后，文本总是比图片先显示出来。这需要大约1秒钟。 - Hoai Truong

我已经在@Hoai Truong处发布了答案。 - nhoxbypass

你解决了吗？ - fnaquira

Answer 1

因为RN中的图片在一个独立的线程中进行本地解码。

图片解码可能需要超过一帧的时间。这是网页上主线程处理解码是导致帧率下降的主要原因之一。

因此，RN会在组件中使用的图像进行解码时显示占位符，然后在每个单独的图像加载后分别显示它们（而不是等待然后在准备就绪时同时显示整个组件）。

参见：Off-thread Decoding

注意

在开发/调试和“真实”生产环境中，图片的加载方式是不同的。在本地调试期间，图像将通过打包服务器上的HTTP进行加载，而在生产中，它们将与应用程序捆绑在一起。

解决方法

尝试在设备上进行生产版本构建（完整发布构建），以查看是否实际存在问题或仅为开发模式的副作用。

或者尝试在此问题中提供的解决方法。

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

并且在你的 render() 函数中：

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

- nhoxbypass

---

我将此图像用作背景图像，因此无法像这样预加载。而且在之前我异步加载了图片。loadAssetsAsync = async() => { return Promise.all([ Asset.loadAsync([ Images.welcomeBg, Images.workingBg, Images.logo, ]), Font.loadAsync({ 'AvenirLTCom-Light': require('@assets/fonts/AvenirLTCom-Light.ttf'), 'AvenirLTCom-Black': require('@assets/fonts/AvenirLTCom-Black.ttf'), }) ]) } - Hoai Truong

就像我之前所说的，这是RN的默认行为。你尝试过进行生产构建吗？ - nhoxbypass

是的，我尝试了一次产品构建，结果还是一样。图片仍然显示缓慢。也许我对图像解码不太清楚。实际上，图像已保存到磁盘中。但为什么它仍然比文本显示得更慢呢？ - Hoai Truong

我尝试了你的解决方案@nhoxbypass，但仍然无法解决问题。我在componentWillMount中加载图片，并将它们传递给实际使用它们的组件，但是在加载时仍然会出现图像卡顿的情况。 - DennyHiu