Подтвердить что ты не робот

Как предотвратить статические изображения в реале Родитель от заикания/загрузки асинхронно на iOS

У меня проблемы с получением изображений в 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 при загрузке изображений. Но это кажется слишком сложным для чего-то подобного.

4b9b3361

Ответ 1

Изображения загружаются по-разному при строительстве для производства и разработки. Во время разработки изображения будут передаваться через HTTP с сервера-упаковщика, тогда как в процессе производства они будут в комплекте с приложением. Попробуйте сделать сборку на устройстве, чтобы увидеть, действительно ли это проблема или просто побочный эффект в режиме разработки.

Ответ 2

Отмечено здесь https://facebook.github.io/react-native/docs/images.html#off-thread-decoding Предполагаю, что ваш пользовательский интерфейс не будет включать слишком много изображений в качестве фона. Откройте проблему для этой утилиты.