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 is some pics of what I mean:

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 work arounds. This is the code I use to load the image:

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

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.

I have seen some solutions which uses 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. Is there any clean solutions for this problem?

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

回答1:

The problem was mine. I had several images which 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';

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

来源：https://stackoverflow.com/questions/55479516/react-native-loads-local-images-with-a-delay