Изображение

Компонент React для отображения различных типов изображений, включая изображения из сети, статические ресурсы, временные локальные изображения и изображения с локального диска, такие как изображения из галереи.

В этом примере показано извлечение и отображение изображения из локального хранилища, а также изображения из сети и даже из данных, предоставленных в схеме URI 'data:'.

Обратите внимание, что для изображений из сети и данных вам необходимо вручную указать размеры изображения!

Примеры

• Компонент функции
• Компонент класса

Вы также можете добавить style к изображению:

• Компонент функции
• Компонент класса

Поддержка GIF и WebP на Android

При разработке собственного нативного кода GIF и WebP по умолчанию не поддерживаются на Android.

Вам потребуется добавить некоторые дополнительные модули в android/app/build.gradle, в зависимости от потребностей вашего приложения.

dependencies {
  // If your app supports Android versions before Ice Cream Sandwich (API level 14)
  implementation 'com.facebook.fresco:animated-base-support:1.3.0'

  // For animated GIF support
  implementation 'com.facebook.fresco:animated-gif:2.5.0'

  // For WebP support, including animated WebP
  implementation 'com.facebook.fresco:animated-webp:2.5.0'
  implementation 'com.facebook.fresco:webpsupport:2.5.0'

  // For WebP support, without animations
  implementation 'com.facebook.fresco:webpsupport:2.5.0'
}

Примечание: указанная выше версия может не обновляться вовремя. Пожалуйста, проверьте ReactAndroid/gradle.properties в главном репозитории, чтобы увидеть, какая версия Fresco используется в конкретной помеченной версии.

Справочник

Свойства

Свойства View

Наследует Свойства View.

accessible

Если true, указывает, что изображение является элементом доступности.

accessibilityLabel

Текст, который читает средство чтения с экрана, когда пользователь взаимодействует с изображением.

blurRadius

blurRadius: радиус размытия фильтра размытия, добавленного к изображению.

Совет: на IOS вам необходимо увеличить blurRadius более чем на 5.

capInsets

iOS

При изменении размера изображения углы размера, указанного в capInsets, останутся фиксированного размера, но центральное содержимое и границы изображения будут растянуты. Это полезно для создания масштабируемых кнопок с закругленными углами, теней и других масштабируемых ресурсов. Дополнительная информация в официальной документации Apple.

defaultSource

Статическое изображение для отображения во время загрузки источника изображения.

Примечание: На Android свойство defaultSource игнорируется в сборках отладки.

fadeDuration

Android

Длительность анимации плавного перехода в миллисекундах.

loadingIndicatorSource

Аналогично source, это свойство представляет собой ресурс, используемый для отображения индикатора загрузки изображения. Индикатор загрузки отображается до тех пор, пока изображение не будет готово к отображению, обычно после загрузки изображения.

onError

Вызывается при ошибке загрузки.

onLayout

Вызывается при монтаже и при изменениях макета.

onLoad

Вызывается при успешном завершении загрузки.

Пример: onLoad={({nativeEvent: {source: {width, height}}}) => setImageRealSize({width, height})}

onLoadEnd

Вызывается при успешном или неудачном завершении загрузки.

onLoadStart

Вызывается при начале загрузки.

Пример: onLoadStart={() => this.setState({loading: true})}

onPartialLoad

iOS

Вызывается при завершении частичной загрузки изображения. Определение того, что считается «частичной загрузкой», зависит от загрузчика, хотя это предназначено для постепенной загрузки JPEG.

onProgress

Вызывается при прогрессе загрузки.

progressiveRenderingEnabled

Android

При true, включает постепенную передачу JPEG - https://frescolib.org/docs/progressive-jpegs.

resizeMethod

Android

Механизм, который должен использоваться для изменения размера изображения, когда размеры изображения отличаются от размеров представления изображения. По умолчанию auto.

• auto: Используйте эвристику для выбора между resize и scale.

• resize: Операция программного обеспечения, которая изменяет закодированное изображение в памяти перед его декодированием. Это следует использовать вместо scale когда изображение намного больше, чем представление.

• scale: Изображение отображается с уменьшением или увеличением масштаба. По сравнению с resize, scale быстрее (обычно с аппаратным ускорением) и обеспечивает более качественное изображение. Это следует использовать, если изображение меньше, чем представление. Это также следует использовать, если изображение немного больше, чем представление.

Дополнительные сведения о resize и scale можно найти по адресу http://frescolib.org/docs/resizing.

resizeMode

Определяет способ изменения размера изображения, когда фрейм не соответствует исходным размерам изображения. По умолчанию cover.

• cover: Масштабировать изображение равномерно (сохранять соотношение сторон изображения), чтобы обе размерности (ширина и высота) изображения были равны или больше соответствующей размерности представления (за вычетом отступов).

• contain: Масштабировать изображение равномерно (сохранять соотношение сторон изображения), чтобы обе размерности (ширина и высота) изображения были равны или меньше соответствующей размерности представления (за вычетом отступов).

• stretch: Масштабировать ширину и высоту независимо, это может изменить соотношение сторон src.

• repeat: Повторять изображение, чтобы заполнить фрейм представления. Изображение сохранит свой размер и соотношение сторон, если оно не больше представления, в противном случае оно будет равномерно уменьшено, чтобы уместиться в представлении.

• center: Центрировать изображение в представлении по обеим размерностям. Если изображение больше представления, равномерно уменьшить его масштаб, чтобы оно поместилось в представление.

source

Источник изображения (путь к удаленному ресурсу или локальному файлу).

Это свойство также может содержать несколько удаленных путей, указанных вместе с их шириной и высотой и, возможно, с аргументами масштабирования/другими аргументами URI. Затем нативное приложение выберет наилучшее uri для отображения на основе измеренных размеров контейнера изображения. Свойство cache может быть добавлено для управления тем, как сетевые запросы взаимодействуют с локальным кэшем. (Дополнительную информацию см. в Управление кэшированием изображений).

В настоящее время поддерживаются форматы png, jpg, jpeg, bmp, gif, webp, psd (только iOS). Кроме того, iOS поддерживает несколько форматов RAW-изображений. Обратитесь к документации Apple за текущим списком поддерживаемых моделей камер (для iOS 12 см. https://support.apple.com/en-ca/HT208967).

style

testID

Уникальный идентификатор для этого элемента, используемый в скриптах тестирования автоматизации пользовательского интерфейса.

Методы

abortPrefetch()

Android

Image.abortPrefetch(requestId);

Прервать запрос предварительной загрузки.

Параметры:

getSize()

Image.getSize(uri, success, [failure]);

Получение ширины и высоты (в пикселях) изображения перед его отображением. Этот метод может завершиться ошибкой, если изображение не найдено или не загружено.

Для получения размеров изображения оно может сначала потребовать загрузки или скачивания, после чего будет помещено в кэш. Это означает, что в принципе вы можете использовать этот метод для предварительной загрузки изображений, однако он не оптимизирован для этой цели и в будущем может быть реализован таким образом, что не полностью загрузит/скачает данные изображения. Правильный и поддерживаемый способ предварительной загрузки изображений будет предоставлен как отдельный API.

Параметры:

getSizeWithHeaders()

Image.getSizeWithHeaders(uri, headers, success, [failure]);

Получение ширины и высоты (в пикселях) изображения перед его отображением с возможностью предоставления заголовков для запроса. Этот метод может завершиться ошибкой, если изображение не найдено или не загружено. Он также не работает для статических ресурсов изображений.

Для получения размеров изображения оно может сначала потребовать загрузки или скачивания, после чего будет помещено в кэш. Это означает, что в принципе вы можете использовать этот метод для предварительной загрузки изображений, однако он не оптимизирован для этой цели и в будущем может быть реализован таким образом, что не полностью загрузит/скачает данные изображения. Правильный и поддерживаемый способ предварительной загрузки изображений будет предоставлен как отдельный API.

Параметры:

prefetch()

await Image.prefetch(url);

Предварительно загружает удаленное изображение для последующего использования, загружая его в кэш на диске. Возвращает обещание, которое разрешается в булево значение.

Параметры:

queryCache()

await Image.queryCache(urls);

Выполняет запросы к кэшу. Возвращает обещание, которое разрешается в отображение из URL в состояние кэша, такое как «диск», «память» или «диск/память». Если запрошенный URL отсутствует в отображении, это означает, что он отсутствует в кэше.

Параметры:

resolveAssetSource()

Image.resolveAssetSource(source);

Преобразует ссылку на ресурс в объект, который имеет свойства uri, width, и height.

Параметры:

Определения типов

ImageCacheEnum

iOS

Перечисление, которое можно использовать для установки обработки или стратегии кэширования для потенциально кэшированных ответов.

• default: Использование стратегии по умолчанию для родной платформы.
• reload: Данные для URL будут загружены из исходного источника. Данные из кэша не должны использоваться для удовлетворения запроса на загрузку URL.
• force-cache: Существующие кэшированные данные будут использованы для удовлетворения запроса, независимо от его возраста или срока действия. Если в кэше нет соответствующих данных, данные загружаются из исходного источника.
• only-if-cached: Существующие кэшированные данные будут использованы для удовлетворения запроса, независимо от его возраста или срока действия. Если в кэше нет соответствующих данных, попытка загрузки данных из исходного источника не предпринимается, и загрузка считается неудачной.

ImageLoadEvent

Объект, возвращаемый в функции обратного вызова onLoad.

Свойства:

Объект источника

Свойства:

ImageSource

Свойства (если передается как объект или массив объектов):

Если передается число:

• number - непрозрачный тип, возвращаемый чем-то вроде require('./image.jpg').