У меня проблемы с получением изображений в React Native для работы, как я хочу.
Поскольку изображения в RN декодируются изначально в отдельном потоке, React Native отображает изображения, которые используются в моих компонентах (фоновые изображения, ручки, регуляторы, слайдеры) в разное время после загрузки каждого отдельного изображения - вместо того, чтобы показывать весь компонент сразу, когда он готов.
Я использую метод require для рендеринга изображений:
<Image source={require('./component-bg.png')} />
<Image source={require('./handle.png')} />
<Image source={require('./track.png')} />
Эта асинхронная загрузка была бы приемлемой, если загрузка была почти немедленной. Но даже небольшие изображения, похоже, медленно загружаются. Это приводит к тому, что пользовательский интерфейс чувствует себя очень непрофессионально, вплоть до момента, когда все изображения загружены для данного компонента.
Есть ли способ ускорить загрузку изображения? Было бы быстрее обернуть UIImageView (отображение изображений в проектах XCode iOS кажется мгновенным). Могут ли ссылки "uri" на изображение, связанное вручную в XCode, быстрее? Для меня это не имеет смысла, поэтому React Native будет намного медленнее при визуализации изображений, чем обычные приложения для iOS. Более того, когда у меня есть несколько динамических экземпляров созданного компонента - изображения, похоже, снова загружаются, каждый раз, когда создается новый компонент.
Вручную отслеживать состояние загрузки изображения
Конечно, я мог бы вручную отслеживать каждый отдельный процесс загрузки изображения, а непрозрачность представления контейнера компонента начиналась с 0, а затем анимация до 1 при загрузке изображений. Но это кажется слишком сложным для чего-то подобного.