Question

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

页面加载后，我可以首先看到左侧的图像，经过约0.2秒的延迟，右侧的图像会逐渐淡入。我已经搜索了此问题，但找不到任何干净的解决方法。这是我用来加载图像的代码：

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

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

我已经看到一些解决方案，这些解决方案在加载Image时使用组件的状态来设置标志，然后呈现组件，但是我认为应该有更好的解决方案。有没有针对此问题的干净解决方案？

这对本机反应非常令人失望，因为它无法以令人满意的方式加载简单的小图像！

Answer 1

问题出在我身上。我有一些图像是从互联网上加载的，因此我使用了React Native Element的Image组件，该组件在图像下载时有一个占位符。该图像组件导致了这种效果，因此我将两个图像都添加为：

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

现在，当我使用图像形式React Native核心时，它可以快速加载静态图像！