Изображения легко добавить в приложение React Native. Узнайте все подробности о встроенном компоненте Image.

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

Компонент React Native Image

Компонент изображения React Native — это компонент по умолчанию, предоставляемый библиотекой React Native для рендеринга изображений в ваших мобильных приложениях. Компонент может загружать изображения как из локальных, так и из удаленных источников. Он предоставляет несколько реквизитов для настройки и стилизации визуализируемых изображений.

Чтобы использовать компонент изображения в своем приложении, импортируйте Изображение из реагировать родной библиотека:

Импортировать Реагировать от«реагировать»;
Импортировать {Таблица стилей, изображение, вид} от«реагирующий нативный»





instagram viewer

;
константа Приложение = () => {
возвращаться (

 стиль={стили.изображение}
 источник={требовать('./assets/мое-изображение.jpg')}
 />
 </View>
 );
};
константа стили = Таблица стилей.create({
 контейнер: {
 гибкий: 1,
 выравнивание элементов: 'центр',
 выравнивание содержимого: 'центр',
 },
 изображение: {
 ширина: 200,
 высота: 200,
 границаРадиус: 100,
 },
});

Выше есть простой Приложение Компонент с изображением. Изображение компонент занимает стиль реквизит, который устанавливает ширина, высота, и границаРадиус изображения. Это также занимает источник prop, который загружает изображение из локального файла, расположенного в папке «assets» в каталоге приложения. источник prop определяет путь к включаемому образу и может принимать как локальные, так и сетевые/удаленные источники изображений.

Локальные изображения доступны на устройстве пользователя и вы можете хранить их как временно, так и постоянно. Вы можете хранить локальные изображения в каталоге проекта приложения, например ресурсы папка. Вы также можете найти изображения за пределами каталога приложения, например, в фотопленке устройства или в библиотеке фотографий. Вот пример исходного пути к локальному образу:

ури: 'файл:///путь/к/моему-изображению.jpg' }} />

Сетевые изображения доставляются через Интернет. Они могут включать URL-адреса HTTP/HTTPS или URI данных в кодировке base64, которые встраивают данные непосредственно в URL-адрес с использованием схемы кодирования Base64.

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

Есть несколько реквизитов, которые вы можете использовать для стилизации и настройки компонента React Native Image.

режим изменения размера

режим изменения размера prop определяет, как React должен изменять размер и позиционировать изображение в своем контейнере. Есть несколько доступных значений для режим изменения размера, каждый из которых будет влиять на изображение по-разному.

  • крышка: это значение равномерно масштабирует изображение, чтобы оба размера были равны или превышали размер содержащего его элемента. Затем изображение центрируется внутри контейнера. Использование этого значения может привести к обрезке изображения для сохранения соотношения сторон.
  • содержать: Это попытается идеально подогнать и центрировать изображение в пределах размеров контейнера. Однако это может привести к появлению пустого пространства по краям изображения.
  • потягиваться: потягиваться value растягивает изображение, чтобы заполнить весь контейнер, независимо от соотношения сторон. Иногда приводит к искажению изображения.
  • повторить: это значение повторяет изображение как по горизонтали, так и по вертикали, чтобы заполнить весь контейнер.
  • центр: центрирует изображение внутри элемента-контейнера без его масштабирования.

в процессе

Это функция обратного вызова который запускается, когда изображение заканчивает загрузку. Вы можете использовать его для выполнения действий после загрузки изображения, таких как обновление состояния компонента или отображение сообщения пользователю.

при ошибке

при ошибке prop запустится, если или когда изображение не загрузится. Он предоставляет способ выполнить необходимые действия в случае возникновения ошибки при попытке загрузить изображение. Вы можете отобразить сообщение об ошибке для пользователя или повторить попытку загрузки изображения.

источник по умолчанию

Это свойство указывает резервное изображение, которое будет отображаться, если основное изображение не загрузится. Вы можете использовать его для предоставления изображения по умолчанию или изображения-заполнителя во время загрузки основного изображения.

Обработка удаленных изображений из API

Возможно, вам потребуется получить изображение для вашего приложения с API или удаленного сервера и отобразить его в своем приложении. Вы можете использовать встроенный React принести функция или Библиотека запросов API, такая как Axios для этой цели.

Вот пример того, как получить и отобразить изображение из удаленного API с помощью принести функция:

константа [imageUri, setImageUri] = useState(нулевой);
использоватьЭффект(() => {
 принести(' https://example.com/api/images/1')
 .затем(ответ => ответ.json())
 .затем(данные => setImageUri (данные.url))
 .ловить(ошибка =>консоль.error (ошибка));
}, []);
возвращаться (

 {изображениеУри? (
ури: imageUri }} />
 ): (
Загрузка...</Text>
 )}
 </View>
);

Выполнение этого кода в вашем приложении приведет к извлечению изображения из заданной удаленной ссылки API. В примере сначала создается переменная состояния для изображениеУри. В течение использованиеЭффект крючок, принести функция извлекает imageUri и сохраняет его в переменной состояния, используя setImageUri().

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

Использование Cache Policy Prop для управления поведением кэша

Ваш браузер может кэшировать изображения, которые он загружает с удаленных URL-адресов, чтобы быстро загружать их снова в будущем. Вы можете настроить поведение кэшированного изображения с помощью тайник опора Это свойство может указать, как браузер должен кэшировать изображение и как он должен аннулировать этот кеш.

Свойство кэша может принимать такие значения, как по умолчанию, перезагрузка, принудительное кэширование, и только-если-кешируется.

Вот пример того, как использовать тайник prop для управления поведением кэша изображения:

 источник={{
 ури: ' https://example.com/images/my-image.png',
 кеш: 'принудительный кеш',
 кешКлюч: 'мое изображение',
 неизменный: истинный
 }}
/>

тайник свойство установлено на 'принудительный кеш', что указывает на то, что браузер должен загрузить изображение из кеша, если оно доступно, даже если эта версия кеша устарела.

Новая опора cacheKey здесь тоже играет роль. Он настроен на 'мое изображение', который будет служить пользовательским ключом кэша, который вы сможете использовать для ссылки на кэшированное изображение позже.

Так же неизменный свойство установлено на истинный, который указывает браузеру рассматривать эту запись кэша как неизменяемую и никогда не делать ее недействительной.

Все об изображениях

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

Для удаленных изображений вы всегда можете использовать заполнитель для отображения временного изображения или текста во время загрузки удаленного изображения. Это улучшит взаимодействие с пользователем, предоставив немедленную визуальную обратную связь и предотвратив зависание приложения.