Метод prefetch

Метод prefetch компонента Image принимает строку адреса и возвращает промис. После успеха тот же uri быстрее попадает в Image на экране. Ошибку сети ловят через catch у промиса.

Синтаксис

const promise = Image.prefetch(url);

Параметры

Параметр	Описание
`url`	Строка адреса картинки, например `'https://example.com/a.png'`.

Пример

Давайте предзагрузим картинку перед показом экрана:

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

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

export default function App() {
	const [ready, setReady] = useState(false);

	useEffect(() => {
		Image.prefetch(uri)
			.then(() => setReady(true))
			.catch(() => setReady(false));
	}, []);

	if (!ready) {
		return <Text>abcde</Text>;
	}

	return (
		<Image
			source={{ uri }}
			style={{ width: 100, height: 100 }}
		/>
	);
}

На экране сначала текст 'abcde'. После завершения prefetch появится картинка.

Пример

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

import { Image } from 'react-native';

const urls = [
	'https://example.com/a.png',
	'https://example.com/a.png',
];

Promise.all(urls.map((url) => Image.prefetch(url))).then(() => {
	console.log('12345');
});

В консоли после загрузки всех адресов появится строка '12345'.

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

метод getSize,
который узнает размер картинки по адресу
компонент Image,
который рисует картинку на экране
компонент ImageBackground,
который кладет картинку фоном
компонент FlatList,
который строит длинный список на экране