React-native 延迟加载本地图像答案

【问题标题】：React-native loads local images with a delayReact-native 延迟加载本地图像
【发布时间】：2020-02-03 04:29:13
【问题描述】：

我有一个混合的 react-native 应用程序，并且我有一些从捆绑包中加载的静态图像。在应用程序中，当我打开包含图像的页面时，它会在图像被解码时显示一个灰色矩形。以下是我的意思的一些图片：

当页面加载时，我可以先看到左边的图像，然后在大约 0.2 秒的延迟后，右边的图像会淡入。我已经搜索了这个问题，但找不到任何干净的解决方法。这是我用来加载图像的代码：

<Image
     style={{
         height: 30,
         width: 30,
         marginStart: 5,
     }}
     source={require('../assets/google-logo.png')}
/>

我什至尝试通过应用程序包加载图像（即通过 XCode/Android Studio 添加图像），但同样的情况再次发生。我认为这可能是调试版本的影响，因为它是从打包程序加载的，但后来我构建了一个发布版本，同样的事情发生了。

我见过一些解决方案，它们使用组件的状态在加载图像时设置标志，然后渲染组件，但我认为应该有更好的东西。这个问题有什么干净的解决方案吗？

这对于 react-native 来说非常令人失望，它无法以愉快的方式加载简单的小图像！

【问题讨论】：

【解决方案1】：

问题是我的。我有几张图片是从互联网上加载的，因此我使用了react-native-element 的图片组件，它有一个占位符，用于下载图片。这个图像组件导致了效果，所以我将这两个图像添加为：

import { Image } from 'react-native';
import { Image as RneImage } from 'react-native-elements';

现在当我使用 Image form React Native 内核时，它可以快速加载静态图片！

【讨论】：