React Native: Стилизация приложений (Урок 4)

Этот урок посвящен различным способам стилизации приложений React Native. Код к домашним заданиям и другая полезная информация доступны на aetprager.com. Ссылка на урок на сайте указана в описании.

Способы добавления стилей

В предыдущих уроках мы уже затрагивали тему стилей. Принцип работы прост: атрибут style добавляется к стилизуемому объекту. Значение атрибута может быть:

Ссылка на константу: Это аналог использования CSS-класса. Ссылка ведёт к константе, содержащей набор стилей.
Объект со стилями: Стиль задаётся напрямую через объект. Например:

style={{ backgroundColor: 'red' }}

Это окрашивает элемент в красный цвет. Для указания нескольких свойств используется запятая.

Созданная константа: Создаётся константа, содержащая объект со стилями:

const simpleStyle = {
  backgroundColor: 'red',
  color: 'blue'
};

Используется в атрибуте style:

style={simpleStyle}

Использование StyleSheet.create

Зачем использовать StyleSheet.create, если стили можно задавать напрямую или через константы? StyleSheet.create включает валидатор, проверяющий корректность стилей на этапе компиляции. Это предотвращает ошибки, которые могли бы остаться незамеченными при прямом указании стилей в атрибуте style. В дальнейшем мы будем использовать именно этот метод.

Добавление нескольких стилей

К одному объекту можно применить несколько стилей, передав массив в атрибут style:

style={[simpleStyle, styles.container]}

Стили применяются последовательно, последующие перекрывают предыдущие.

Объект View

Объект View в React Native аналогичен тегу <div> в HTML. Он представляет собой блок, к которому можно применять стили и вкладывать другие объекты View. Пример:

<View style={styles.block}>
  <Text>Текст</Text>
</View>

Здесь стили styles.block применяются к внешнему блоку View.

Стили в React Native: основные свойства

В styles.block можно использовать многие свойства CSS:

backgroundColor: цвет фона (например, ‘yellow’, ‘#fff’, ‘rgb(255, 0, 0)’).
width, height: ширина и высота (например, 250, ‘50%’).
opacity: прозрачность (от 0 до 1).
boxShadow: тень.
border: обводка (используйте borderWidth, borderColor, borderStyle).
top, left, right, bottom: относительное позиционирование.
position: ‘absolute’: абсолютное позиционирование.

Платформенно-зависимые стили

Для применения разных стилей на iOS и Android используется Platform:

top: Platform.OS === 'ios' ? 150 : 30

Отступ сверху будет 150 пикселей на iOS и 30 пикселей на Android. Этот подход применим и для других свойств, например, для условного отображения блоков.

Flexbox

Flexbox – мощный инструмент для компоновки элементов. flex: 1 заставляет элемент занимать всё доступное пространство. flexDirection определяет направление расположения элементов (‘row’ – горизонтально, ‘column’ – вертикально). justifyContent и alignItems управляют выравниванием. Свойство flex задаёт вес элементов. justifyContent выравнивает по горизонтали, alignItems – по вертикали. flex-direction: row размещает элементы в строку, flex-direction: column – в столбец.

В этом уроке мы рассмотрели различные способы работы со стилями в React Native. Знание CSS значительно упрощает этот процесс. Для повышения надёжности кода рекомендуется использовать StyleSheet.create. Flexbox предоставляет удобные инструменты для создания сложных интерфейсов.