如何防止 React Native 中的静态图像在 iOS 上出现卡顿/异步加载

Posted 2023-03-10

【中文标题】如何防止 React Native 中的静态图像在 iOS 上出现卡顿/异步加载

【英文标题】：How to prevent Static Images in React Native from stuttering / loading asynchronously on iOS

【发布时间】：2016-03-20 05:51:06

【问题描述】：

我无法让 React Native 中的图像按我的意愿工作。

因为 RN 中的图像是在单独的线程中本地解码的，所以 React Native 会在每个单独的图像加载后在不同的时间显示在我的组件中使用的图像（背景图像、手柄、旋钮、滑块） - 而不是显示当它准备好时，立即完成整个组件。

我正在使用 require 方法来渲染图像：

<Image source=require('./component-bg.png') />
<Image source=require('./handle.png') />
<Image source=require('./track.png') />

如果加载几乎是即时的，这种异步加载是可以接受的。但即使是小图像似乎也在缓慢加载。这导致 UI 感觉非常不专业，直到为给定组件加载了所有图像。

有什么方法可以加快图片加载速度？包装 UIImageView 会更快吗（在 XCode ios 项目中显示的图像似乎是即时的）。对 XCode 中手动捆绑图像的“uri”引用会更快吗？ 这对我来说真的没有意义，为什么 React Native 在渲染图像时会比普通的 iOS 应用程序慢得多。 此外，当我创建了一个组件的多个动态实例时 - 每次创建新组件时，图像似乎都必须重新加载。

手动跟踪图片加载状态

当然，我可以手动跟踪每个单独的图像的加载事件，并让组件的容器视图的不透明度从 0 开始，然后在图像加载时动画到 1。但是对于这样的事情，这似乎过于复杂。

【问题讨论】：

您能找到解决方法吗？

@developer82，不直接。我做了一个解决方法来手动跟踪容器组件中的图像加载状态，这将抽象出此功能并使其易于在其他容器中使用。但是我没有时间正确实施它。在 GitHub 上查看相关问题：github.com/facebook/react-native/issues/…

【参考方案1】：

为生产和开发构建时，图像的加载方式不同。在开发过程中，图像将从打包服务器通过 HTTP 提供，而在生产中，它们将与应用程序捆绑在一起。尝试在设备上进行生产构建，看看它是否真的是一个问题或只是开发模式的副作用。

【讨论】：

很高兴知道这一点！

【参考方案2】：

注意这里https://facebook.github.io/react-native/docs/images.html#off-thread-decoding 我猜假设您的用户界面不会包含太多图像作为背景。为此用例打开一个问题。

【讨论】：

感谢 Harry 确认当前不支持此功能。我在 github 上为此用例提交了一个问题：github.com/facebook/react-native/issues/4869