Метод resolveAssetSource

Метод resolveAssetSource компонента Image принимает значение source из require. Синхронно возвращает объект с uri, width, height и scale или null, если источник не из каталога проекта.

Синтаксис

const res = Image.resolveAssetSource(source);

Параметры

Параметр	Описание
`source`	Результат `require` для png или jpg из каталога проекта.

Пример

Давайте прочитаем uri локального файла assets/a.png:

import { Image } from 'react-native';

const source = require('./assets/a.png');
const res = Image.resolveAssetSource(source);

Результат выполнения кода:

{ uri: "...", width: 100, height: 100, scale: 1 }

В переменной res лежит адрес для нативного загрузчика и размеры в логических пикселях. Точные числа зависят от файла в проекте.

Пример

Давайте передать полученный uri в другой компонент:

import { Image } from 'react-native';

const bundled = require('./assets/a.png');
const resolved = Image.resolveAssetSource(bundled);

export default function App() {
	return (
		<Image
			source={{ uri: resolved.uri }}
			style={{ width: resolved.width, height: resolved.height }}
		/>
	);
}

На экране локальная картинка с размером из метаданных ресурса.

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

компонент Image,
который рисует картинку на экране
метод getSize,
который узнает размер по сетевому адресу
компонент ImageBackground,
который кладет картинку фоном
класс StyleSheet,
который собирает объект стиля