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

Уроки React Native

#4 – Написание стилей для приложения

#4 – Написание стилей для приложения

Для создания красивого дизайна требуется прописывать стили к объектам. В ходе урока мы познакомимся с написанием стилей в React Native, рассмотрим особенности их написания и дополнительно изучим технологию FlexBox.

Видеоурок

Использование CSS

В React Native не используется язык стилей CSS. Вместо него вы можете использовать язык программирования JavaScript и создавать объекты на его основе. В качестве названий свойств вы указываете схожие названия с языком CSS, а в качестве значений вы указываете так же схожие названия значений из языка CSS. 


Язык CSS хоть и не используется в React Native, но его синтаксис используется повсеместно для создания дизайна приложения.


Написание стилей

Все стили необходимо помещать внутрь отдельного объекта. Пример такого объекта представлен ниже:

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#fff',
		alignItems: 'center',
		justifyContent: 'center',
	}
});

Стили, что указаны выше очень схожи с CSS стилями за исключением того, что это JS объект. Подобные стили можно добавлять к любым компонентам. Пример добавления стилей:

<View style={styles.container}></View>

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

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

Исходный код

Весь код будет доступен после подписки на проект!

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

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

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

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

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

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