Image¶

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

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

Примеры¶

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

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

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'
}

Свойства¶

View Props¶

Наследует View Props.

accessible¶

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

accessibilityLabel¶

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

alt¶

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

blurRadius¶

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

capInsets ¶

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

crossOrigin¶

Строка ключевого слова, указывающая режим CORS, который следует использовать при получении ресурса изображения. Работает аналогично атрибуту crossorigin в HTML.

• anonymous: Нет обмена учетными данными пользователя в запросе изображения.
• use-credentials: Устанавливает значение заголовка Access-Control-Allow-Credentials на true в запросе изображения.

defaultSource¶

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

fadeDuration ¶

Продолжительность анимации затухания в миллисекундах.

height¶

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

loadingIndicatorSource¶

onError¶

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

onLayout¶

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

onLoad¶

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

1
2
3

onLoad = {({nativeEvent: {source: {width, height}}}) =>
        setImageRealSize({width, height}
)}

onLoadEnd¶

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

onLoadStart¶

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

1

onLoadStart={() => this.setState({loading: true})}

onPartialLoad ¶

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

onProgress¶

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

progressiveRenderingEnabled ¶

Если true, включает прогрессивную потоковую передачу jpeg.

resizeMethod ¶

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

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

Более подробно о resize и scale можно узнать на сайте.

referrerPolicy¶

Строка, указывающая, какой реферер использовать при получении ресурса. Устанавливает значение для заголовка Referrer-Policy в запросе изображения. Работает аналогично атрибуту referrerpolicy в HTML.

resizeMode¶

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

• cover: Масштабируйте изображение равномерно (сохраняя соотношение сторон изображения) так, чтобы
  • оба размера (ширина и высота) изображения были равны или больше соответствующего размера представления (минус подложка)
  • по крайней мере одно измерение масштабированного изображения будет равно соответствующему измерению представления (минус padding).
• contain: Масштабировать изображение равномерно (сохраняя соотношение сторон изображения) так, чтобы оба размера (ширина и высота) изображения были равны или меньше соответствующего размера представления (минус подложка).
• stretch: Масштабировать ширину и высоту независимо, это может изменить соотношение сторон src.
• repeat: Повторять изображение, чтобы покрыть рамку представления. Изображение сохранит свой размер и соотношение сторон, если только оно не больше, чем вид, в этом случае оно будет равномерно уменьшено, чтобы оно поместилось в вид.
• center: Центрирует изображение в представлении по обоим измерениям. Если изображение больше, чем вид, равномерно уменьшите его масштаб так, чтобы оно поместилось в вид.

source¶

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

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

В настоящее время поддерживаются следующие форматы: png, jpg, jpeg, bmp, gif, webp, psd (только для iOS). Кроме того, iOS поддерживает несколько форматов изображений RAW. Актуальный список поддерживаемых моделей камер см. в документации Apple.

src¶

Строка, представляющая удаленный URL изображения. Этот параметр имеет приоритет перед параметром source.

Пример:

1

src = {'https://reactnative.dev/img/tiny_logo.png'}

srcSet¶

Строка, представляющая собой разделенный запятыми список возможных источников изображений-кандидатов. Каждый источник изображения содержит URL-адрес изображения и дескриптор плотности пикселей. Если дескриптор не указан, по умолчанию используется дескриптор 1x.

Если srcSet не содержит дескриптора 1x, значение в src используется в качестве источника изображения с дескриптором 1x (если он предоставлен).

Этот пропс имеет приоритет над пропсами src и source.

Пример:

1
2
3
4

srcSet = {'
    https://reactnative.dev/img/tiny_logo.png 1x,
    https://reactnative.dev/img/header_logo.svg 2x
'}

style¶

testID¶

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

tintColor¶

Изменяет цвет всех непрозрачных пикселей на tintColor.

width¶

Ширина компонента изображения.

Методы¶

abortPrefetch() ¶

1

static abortPrefetch(requestId: number);

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

Параметры:

getSize()¶

1
2
3
4
5

static getSize(
  uri: string,
  success: (width: number, height: number) => void,
  failure?: (error: any) => void,
): any;

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

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

Параметры:

getSizeWithHeaders()¶

1
2
3
4
5
6

static getSizeWithHeaders(
  uri: string,
  headers: {[index: string]: string},
  success: (width: number, height: number) => void,
  failure?: (error: any) => void,
): any;

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

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

Параметры:

prefetch()¶

1

await Image.prefetch(url);

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

Параметры:

queryCache()¶

1
2
3

static queryCache(
  urls: string[],
): Promise<Record<string, 'memory' | 'disk' | 'disk/memory'>>;

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

Параметры:

resolveAssetSource()¶

1
2
3
4
5
6

static resolveAssetSource(source: ImageSourcePropType): {
  height: number;
  width: number;
  scale: number;
  uri: string;
};

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

Параметры:

Определения типа¶

ImageCacheEnum ¶

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

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

ImageLoadEvent¶

Объект, возвращаемый в обратном вызове onLoad.

Свойства:

Исходный объект:

ImageSource¶

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

При передаче числа:

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

Комментарии