У меня проблемы с получением изображений в 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 при загрузке изображений. Но это кажется слишком сложным для чего-то подобного.
Изображения загружаются по-разному при строительстве для производства и разработки. Во время разработки изображения будут передаваться через HTTP с сервера-упаковщика, тогда как в процессе производства они будут в комплекте с приложением. Попробуйте сделать сборку на устройстве, чтобы увидеть, действительно ли это проблема или просто побочный эффект в режиме разработки.
Отмечено здесь https://facebook.github.io/react-native/docs/images.html#off-thread-decoding Предполагаю, что ваш пользовательский интерфейс не будет включать слишком много изображений в качестве фона. Откройте проблему для этой утилиты.