React-native延迟加载本地图像 [英] React-native loads local images with a delay

问题描述

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

I have a hybrid react-native app and I have some static images which are loaded from the bundle. In the app when I open a page containing the images, it shows a gray rectangle while the image is getting decoded. Here are some pics of what I mean:

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

When the page loads, I can see the left image first and after a delay of ~0.2 seconds the right image fades in. I have searched for this issue and I can't find any clean workarounds. This is the code I use to load the image:

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

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

I have even tried to load the images through application bundles (i.e. add the image through XCode/Android Studio) but again the same happens. I thought this might be an effect of the debug version as it is loading from the packager but then I built a release version and the same happened.

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

I have seen some solutions which use the state of the component to set a flag when the Image is loaded and then render the component but I think there should be something better. Are there any clean solutions to this problem?

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

This is very disappointing about react-native that it cannot load simple small images in a pleasant way!

推荐答案

问题出在我身上.我有几张图像是从互联网上加载的，因此我使用了 react-native-element 的Image组件，该组件在图像下载时具有占位符.该图像组件导致了这种效果，因此我将两个图像都添加为:

The problem was mine. I had several images that some loaded from the internet and therefore I used react-native-element's Image component which has a placeholder for when the image is downloading. This image component caused the effect so I added both images as:

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

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

Now when I am using Image form React Native core, it loads static images fast!

这篇关于React-native延迟加载本地图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！