image

Изображение.

Размер

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

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

Свойства

src*: string | { url, width?, height?}

Параметры исходного изображения. Строка с URL исходника или объект с полями:

url*: string Строка с URL исходника.
width*: number Ширина исходника. Указывается вместе с height. При указании и width, и height предотвращается возможный скачёк страницы при первой загрузке, посколько настоящий размер изображения не известен до начала его загрузки. Заданный размер исходника может отличаться от реального и именно он учитывается при отображении.
height*: number Ширина исходника. См. width выше.

resizeMode: `string`

По-умолчанию: cover

Метод размещения изображения в случае отличия пропорций отображения от исходника.

cover — Изображение вписывается закрыв всю область отображения. Часть изображения что не вписывается в область становится не видна. Пропорции сохраняются.
contain — Изображение умещается целиком, с отступами по сторонам с недостающими данными. Пропорции сохраняются.
tretch — Изображение растягивается по границам области. Пропорции игнорируются.

style

ИИзменение внешнего вида расположения и геометрии блока.

width, maxWidth, minWidth
Ширина блока. Подробнее.
height, maxHeight, minHeight
Высота блока. Подробнее.
margin, marginHorizontal, marginVertical, marginTop, marginRight, marginBottom, marginLeft
Внешние отступы блока. Подробнее.
position
Метод позиционирования блока: relative или absolute. Подробнее.
top, right, bottom, left
Смещение относительно исходной позиции. Подробнее.
border
Задание границ для блока по всем четырём сторонам: толщина стиль и цвет. Подробнее.
borderTop, borderRight, borderBottom, borderLeft
Задание индивидуальных границ для сторон блока: толщина и цвет. Подробнее.
borderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius
Скругление углов границ. Подробнее.
borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth
Толщина границ. Подробнее.
borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor
Цвет границ. Подробнее.
backgroundColor
Цвет фона блока. Подробнее.
backgroundGradient
Градиент фона блока. Подробнее.
opacity
Непрозрачность всего блока с его содержимым. Подробнее.
elevation
Высота тени. Подробнее.
shadowColor
Цвет тени блока. Подробнее.
flexBasis
Исходный размер блока по главной оси контейнера. Подробнее.
flexGrow
Коэффициент роста блока по главной оси контейнера. Подробнее.
flexShrink
Коэффициент сжатия блока по главной оси контейнера. Подробнее.
flex
Задаёт поведение размера блока (рост сжатие и исходный размер) по главной оси контейнера. Подробнее.
alignSelf
Выравнивание конкретного блока поперёк главной оси контейнера. Подробнее.
transform
Преобразование геометрии блоков и контейнеров в 2D и 3D пространстве. Подробнее.

Примеры

Изображение по ширине 300 пикселей меньшее содержащего блока в 350.

Изображение по ширине 450 пикселей большее содержащего блока в 350. Ограничвается шириной блока. Пропорции изображения сохраняются.

Изображение с указанием размеров исходника для предотвращения скачка страницы при первой загрузке. См. src.with в описании параметров выше.

Изображение с указанием относительной ширины отображения. Высота вычисляется с сохранением пропорций от размеров заданных при указании исходника. Если размеры исходника не заданы, пропорции рассчитываются от настоящих размеров изображения. В таком случае возможен скачёк страницы при первом открытии: см. src.with в описании параметров выше

Ландшафтное изображение в портретных размерах. Метод масштабирования cover (по-умолчанию). Изображение вписывается закрыв всю область отображения. Часть изображения что не вписывается в область становится не видна. Пропорции сохраняются.

Ландшафтное изображение в портретных размерах. Метод масштабирования contain. Изображение умещается целиком, с отступами по сторонам с недостающими данными. Пропорции сохраняются.

Ландшафтное изображение в портретных размерах. Метод масштабирования stretch. Изображение растягивается по границам области. Пропорции игнорируются.

Документация