React-native загружает локальные изображения с задержкой - PullRequest
Новая
       25

React-native загружает локальные изображения с задержкой

0 голосов
/ 02 апреля 2019

У меня есть гибридное реактивное приложение, и у меня есть несколько статических изображений, которые загружаются из пакета.В приложении, когда я открываю страницу, содержащую изображения, во время декодирования изображения отображается серый прямоугольник.Вот несколько фотографий того, что я имею в виду:

image not loaded yet enter image description here

Когда страница загружается, я вижу левое изображениесначала и после задержки ~ 0,2 секунды появляется правильное изображение. Я искал эту проблему и не могу найти никаких обходных путей.Вот код, который я использую для загрузки изображения: 

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

Я даже пытался загрузить изображения через пакеты приложений (т.е. добавить изображение через XCode / Android Studio), но снова происходит то же самое.Я подумал, что это может быть следствием отладочной версии, так как она загружается из упаковщика, но затем я создал релизную версию, и то же самое произошло.

Я видел некоторые решения, которые используют состояние компонента для установкифлаг, когда изображение загружается, а затем рендерит компонент, но я думаю, что должно быть что-то лучше.Есть ли чистые решения для этой проблемы?

Это очень разочаровывает, если вы работаете с native, так как он не может загружать простые маленькие картинки приятным способом!

1 Ответ

1 голос
/ 05 апреля 2019

Проблема была моей. У меня было несколько изображений, которые загружались из Интернета, и поэтому я использовал компонент Image React Native Element, который имеет заполнитель для загрузки изображения. Этот компонент изображения вызвал эффект, поэтому я добавил оба изображения как: 

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

Теперь, когда я использую образ формы React Native core, он быстро загружает статические изображения!

...