Компонент Image

Компонент Image рисует bitmap на экране. Источник задают обязательным параметром source: объект с uri или результат require. Размер и рамку задает style. Вписывание в рамку настраивают resizeMode и на Android resizeMethod. Статические методы getSize, prefetch и resolveAssetSource вызывают у самого Image, без ref.

Синтаксис

<Image source={{ uri: 'https://example.com/a.png' }} />

Параметры

Параметр	Описание
`source`	Источник картинки: `{ uri: 'https://example.com/a.png' }` или `require('./file.png')` для локального файла.
`style`	Ширина, высота и рамка элемента на экране.
`resizeMode`	Как вписать картинку в заданный размер. Строка из перечисления `ResizeMode`.
`resizeMethod`	Как уменьшить большую картинку на Android. Строка из перечисления `ResizeMethod`. На iOS параметр не используют.
`onLoad`	Вызов, когда картинка загрузилась и готова к показу.
`onError`	Вызов при ошибке загрузки.

Методы

Метод	Описание
`getSize`	Узнает ширину и высоту картинки по адресу до отрисовки.
`prefetch`	Заранее загружает картинку по адресу в кеш.
`resolveAssetSource`	Разворачивает `require` в uri и размеры ресурса.

Пример

Давайте покажем картинку по сети с фиксированным размером:

import { Image, StyleSheet } from 'react-native';

export default function App() {
	return (
		<Image
			source={{ uri: 'https://example.com/a.png' }}
			style={styles.pic}
			resizeMode="cover"
		/>
	);
}

const styles = StyleSheet.create({
	pic: {
		width: 120,
		height: 120,
	},
});

На экране квадрат 120 на 120 с картинкой, обрезанной по краям под режим 'cover'.

Пример

Давайте отловим успешную загрузку и ошибку:

import { useState } from 'react';
import { Image, Text } from 'react-native';

export default function App() {
	const [label, setLabel] = useState('abcde');

	return (
		<>
			<Image
				source={{ uri: 'https://example.com/a.png' }}
				style={{ width: 80, height: 80 }}
				onLoad={() => setLabel('12345')}
				onError={() => setLabel('abcde')}
			/>
			<Text>{label}</Text>
		</>
	);
}

На экране картинка и подпись. После загрузки текст сменится на '12345', при сбое останется 'abcde'.

Смотрите также

компонент ImageBackground,
который кладет картинку фоном под дочерние элементы
перечисление ResizeMode,
которое задает вписывание картинки
перечисление ResizeMethod,
которое задает уменьшение на Android
компонент View,
который держит дочерние элементы