Метод getSize

Метод getSize компонента Image принимает строку адреса и две функции обратного вызова. В success приходят width и height в пикселях. failure вызывают, если размер получить не удалось.

Синтаксис

Image.getSize(uri, success, failure);

Параметры

Параметр	Описание
`uri`	Строка адреса картинки, например `'https://example.com/a.png'`.
`success`	Функция `(width, height) => { ... }` при успешном чтении размера.
`failure`	Функция при ошибке. Можно передать пустую функцию, если ошибку игнорируют.

Пример

Давайте подставим высоту Image из пропорций файла:

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

const uri = 'https://example.com/a.png';
const boxWidth = 200;

export default function App() {
	const [height, setHeight] = useState(100);

	useEffect(() => {
		Image.getSize(
			uri,
			(width, imgHeight) => {
				setHeight((boxWidth * imgHeight) / width);
			},
			() => {},
		);
	}, []);

	return (
		<Image
			source={{ uri }}
			style={{ width: boxWidth, height }}
			resizeMode="contain"
		/>
	);
}

На экране картинка шириной 200 и высотой по пропорциям исходного файла.

Пример

Давайте сохраним размер в состоянии для подписи:

import { Image } from 'react-native';

const uri = 'https://example.com/a.png';

Image.getSize(
	uri,
	(width, height) => {
		console.log(width, height);
	},
	() => {
		console.log('abcde');
	},
);

В консоли после успеха появятся два числа ширины и высоты. При ошибке будет строка 'abcde'.

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

метод prefetch,
который заранее загружает картинку в кеш
метод resolveAssetSource,
который разворачивает локальный ресурс
компонент Image,
который рисует картинку на экране
перечисление ResizeMode,
которое задает вписывание в рамку