我有一个混合 react native 应用程序,并且有一些从 bundle 加载的静态图像。在应用程序中,当我打开包含图像的页面时,它会在图像解码时显示一个灰色矩形。以下是我的意思的一些图片:
当页面加载时,我可以先看到左边的图像,在大约 0.2 秒的延迟后,右边的图像逐渐淡入。 我已经搜索过这个问题,但找不到任何干净的解决方法。这是我用来加载图像的代码:
<Image
style={{
height: 30,
width: 30,
marginStart: 5,
}}
source={require('../assets/google-logo.png')}
/>
我什至尝试通过应用程序包加载图像(即通过 XCode/Android Studio 添加图像),但同样的情况再次发生。我认为这可能是调试版本的影响,因为它是从打包程序加载的,但后来我构建了一个发行版本,同样的情况发生了。
我见过一些解决方案,它们在加载图像时使用组件的状态设置标志,然后渲染组件,但我认为应该有更好的东西。这个问题有干净的解决方案吗?
react-native 非常令人失望,它无法以愉快的方式加载简单的小图像!
最佳答案
问题是我的。我有几个图像,其中一些是从互联网加载的,因此我使用了react-native-element的图像组件,该组件在下载图像时有一个占位符。该图像组件导致了效果,因此我将两个图像添加为:
import { Image } from 'react-native';
import { Image as RneImage } from 'react-native-elements';
现在,当我使用 React Native 核心的图像时,它加载静态图像速度很快!
关于image - React-native加载本 map 片有延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55479516/