Изображенията се добавят лесно към вашето приложение React Native. Вземете всички тънкости и изходи на вградения компонент Image.

Изображенията осигуряват много стойност за мобилните приложения. Те могат да ви помогнат да илюстрирате концепции, да предадете информация, да създадете визуален интерес и да предоставите контекст за конкретно съдържание, което може да не искате потребителите на вашето приложение да пропуснат.

Компонентът на собственото изображение на React

Компонентът за изображения React Native е компонентът по подразбиране, предоставен от библиотеката React Native за изобразяване на изображения във вашите мобилни приложения. Компонентът може да зарежда изображения както от локални, така и от отдалечени източници. Той предоставя няколко подпори за персонализиране и стилизиране на изобразените изображения.

За да използвате компонента на изображението във вашето приложение, импортирайте Изображение от реагира-роден библиотека:

импортиране Реагирайте от"реагира";
импортиране {Стилова таблица, изображение, изглед} 





instagram viewer


от"реагиране на родния";
конст Приложение = () => {
връщане (

 стил={styles.image}
 източник={изискват('./assets/my-image.jpg')}
 />
 </View>
 );
};
конст стилове = StyleSheet.create({
 контейнер: {
 гъвкав: 1,
 подравняване на елементи: "център",
 justifyContent: "център",
 },
 изображение: {
 ширина: 200,
 височина: 200,
 borderRadius: 100,
 },
});

Горното е просто Приложение компонент с изображение. The Изображение компонентът отнема a стил опора, която задава ширина, височина, и borderRadius на изображението. Също така е необходимо a източник prop, който зарежда изображението от локален файл, намиращ се в папката „assets“ в директорията на приложението. The източник prop дефинира пътя на изображението за включване и може да приема както локални, така и мрежови/отдалечени източници на изображения.

Локалните изображения са налични на устройството на потребителя и можете да ги съхранявате временно или постоянно. Можете да съхранявате локални изображения в директорията на проекта на приложението, като например активи папка. Можете също така да намерите изображения извън директорията на приложението, като например в ролката на камерата на устройството или библиотеката със снимки. Ето пример за изходен път към локално изображение:

uri: 'file:///path/to/my-image.jpg' }} />

Мрежовите изображения се доставят чрез мрежата. Те могат да включват HTTP/HTTPS URL адреси или кодирани с base64 URI адреси за данни, които вграждат данни директно в URL адреса, използвайки схемата за кодиране Base64.

Реквизити за персонализиране на компонента на изображението

Има няколко подпори, които можете да използвате, за да стилизирате и персонализирате компонента React Native Image.

resizeMode

The resizeMode prop определя как React трябва да преоразмери и позиционира изображение в своя контейнер. Има няколко налични стойности за resizeMode, всеки от които ще повлияе на изображението по различен начин.

  • Покрийте: Тази стойност ще мащабира равномерно изображението, така че и двете измерения да са равни или по-големи от съдържащия се в него елемент. След това изображението се центрира в контейнера. Използването на тази стойност може да доведе до изрязване на изображението, за да се запази пропорцията.
  • съдържат: Това ще се опита да пасне и центрира изображението перфектно в рамките на размерите на контейнера. Това обаче може да доведе до празно пространство около краищата на изображението.
  • опъвам, разтягам: The опъвам, разтягам value разтяга изображението, за да запълни целия контейнер, независимо от пропорциите. Понякога това води до изкривяване на изображението.
  • повторете: Тази стойност повтаря изображението хоризонтално и вертикално, за да запълни целия контейнер.
  • център: Това ще центрира изображението в контейнерния елемент, без да го мащабира.

onLoad

Това е функция за обратно извикване който се изпълнява, когато изображението завърши зареждането. Можете да го използвате за извършване на действия след зареждане на изображението, като например актуализиране на състоянието на компонента или показване на съобщение на потребителя.

onError

The onError prop ще се изпълнява, ако или когато изображението не успее да се зареди. Той предоставя начин за извършване на необходимите действия, ако има грешка при опит за зареждане на изображението. Можете да покажете съобщение за грешка на потребителя или да опитате отново да заредите изображението.

defaultSource

Това предложение указва резервно изображение, което да се показва, ако основното изображение не успее да се зареди. Можете да го използвате, за да предоставите изображение по подразбиране или изображение на контейнер, докато основното изображение се зарежда.

Работа с отдалечени изображения от API

Може да се наложи да получите изображението за вашето приложение от API или отдалечен сървър и да го покажете в приложението си. Можете да използвате вградения React извличам функция или ан API заявки библиотека като Axios за тази цел.

Ето пример за това как да извлечете и покажете изображение от отдалечен API с помощта на извличам функция:

конст [imageUri, setImageUri] = useState(нула);
useEffect(() => {
 извличане (' https://example.com/api/images/1')
 .тогава(отговор => response.json())
 .тогава(данни => setImageUri (data.url))
 .catch(грешка =>конзола.error (грешка));
}, []);
връщане (

 {imageUri? (
uri: imageUri }} />
 ): (
Зарежда се...</Text>
 )}
 </View>
);

Изпълнението на този код във вашето приложение ще извлече изображение от зададената връзка за отдалечен API. Примерът първо създава променлива на състоянието за imageUri. В рамките на a useEffect кука, на извличам функцията извлича imageUri и го съхранява в променливата на състоянието с помощта на setImageUri().

Накрая, той прави Изображение компонент с източник prop, зададен на URI на изображението, докато се показва индикатор за зареждане, чакайки изображението да се покаже.

Използване на Cache Policy Prop за контролиране на поведението на кеша

Вашият браузър може да кешира изображения, които зарежда от отдалечени URL адреси, така че да може да ги зарежда отново бързо в бъдеще. Можете да персонализирате поведението на кешираното изображение, като използвате кеш памет опора Това предложение може да укаже как браузърът трябва да кешира изображението и как трябва да обезсили този кеш.

Пропът на кеша може да приема стойности като по подразбиране, презареждане, принудително кеширане, и само ако е кеширано.

Ето пример за това как да използвате кеш памет prop за контролиране на поведението на кеша на изображение:

 източник={{
 uri: ' https://example.com/images/my-image.png',
 кеш: "force-cache",
 cacheKey: "моето изображение",
 неизменен: вярно
 }}
/>

The кеш памет свойството е зададено на "force-cache", което показва, че браузърът трябва да зареди изображението от кеша, ако е налично, дори ако тази версия на кеша е стара.

Нов реквизит cacheKey също е в игра тук. Настроен е на "моето изображение", който ще служи като персонализиран кеш ключ, който можете да използвате за препратка към кешираното изображение по-късно.

Също така, неизменен свойството е зададено на вярно, което казва на браузъра да третира този запис в кеша като неизменен и никога да не го обезсилва.

Всичко, което има за изображенията

Компонентът React Native Image предоставя мощни и гъвкави средства за показване на изображения, включително стилизиране, обработка на отдалечени изображения и контролиране на поведението на кеша.

За отдалечени изображения винаги можете да използвате контейнер, за да покажете временно изображение или текст, докато отдалеченото изображение се зарежда. Това ще създаде по-добро потребителско изживяване чрез предоставяне на незабавна визуална обратна връзка и предотвратяване на това приложението да не реагира.