Делаем добро вместе Детальнее

Уроки React Native

#9 – Модальные окна и векторные иконки

#9 – Модальные окна и векторные иконки

Для реализации небольших картинок в проекте мы будем использовать векторные иконки. За урок мы установим необходимую библиотеку и научимся их использовать. Дополнительно мы разработаем всплывающее модальное окно.

Видеоурок

Полезные ссылки:


Векторные иконки

Векторные иконки это удобный и быстрый способ добавить небольшие картинки внутрь вашего проекта. Для использования векторных иконок требуется выполнить установку дополнительной библиотеки:

npm i @expo/vector-icons

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


Модальные окна

Модальные окна отличаются от всплывающих окон и от отдельных страниц программы. Модальное окно способно открываться внутри страницы без перехода на новую. При этом такое окно может быть открыто на всю ширину и высоту страницы. Внутри оно может содержать другие элементы разметки.


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


Для реализации модальных окон нужно использовать компонент Modal. Ниже пример реализации модального окна:

<Modal visible={true}>
	<Text>Модальное окон</Text>
</Modal>

Материалы для курса

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

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

Также стоит посмотреть

Создание приложения на React JS / Использование API
7 уроков
Курс по React JS для начинающих
14 уроков
Изучение React JS / Redux библиотеки
9 уроков
Комментарии для сайта Cackle