Стилизация в приложениях React Native

По умолчанию приложения React Native не используют HTML и CSS. Тут всё прямо из коробки автоматически оформляется с помощью Flexbox.

Читайте также: Основы работы с CSS Flexbox

В этом руководстве вы узнаете, как применять стили к приложениям React Native.

Требования

Если вы хотите следовать этому мануалу, вам понадобятся:

  • Навыки работы со свойствами и значениями CSS.
  • Базовое знакомство с синтаксисом JSX в React Native.

Компонент StyleSheet

Первое, что нужно узнать о стилях React Native, – это как используется компонент StyleSheet.

Сначала импортируйте его. Это делается так:

import { StyleSheet } from 'react-native';

После этого вы можете использовать этот компонент:

const styles = StyleSheet.create({
  container: {
    height: 100
  }
})

Затем добавьте эту строку, чтобы соответствующим образом стилизовать ваш компонент:

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

Вы также можете использовать встроенный маршрут, например:

<View style={{height: 100}}></View>

Этот код даст такой же результат.

Обработка пикселей

Возможно, вы заметили, что в строке height: 100 мы не указывали единиц измерения высоты. Многие разработчики привыкли писать px, vm и т.п. Так какие же единицы измерения используются по умолчанию в React Native?

Это довольно сложный вопрос, для ответа на который потребовалось перерыть некоторое количество статей. Для систем iOS React Native использует «логические точки», а для Android – DIP. В основе этого лежит множество аргументов. Главное, что нужно запомнить: сегодня существует множество устройств с экранами разных размеров и разных разрешений. Если бы мы использовали обычные пиксели, на некоторых телефонах изображение было бы мозаичным; идея, лежащая в основе «точек», состоит в том, чтобы на экране с высоким разрешением и высокой плотностью пикселей все выглядело относительно так же, как и на экране с низким разрешением.

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

Вы также можете использовать ‘auto’ или процентные значения – их тоже нужно заключить в кавычки, например:

<View style={{ height: '100%' }}></View>

Этот код создаст вид в полную высоту.

Охват всего экрана

Есть одна вещь, которую нужно знать о параметре <View> при заполнении всего экрана. Дело в том, что в телефонах типа iPhone X часть экрана занята пользовательским интерфейсом (UI). Часто получается так, что некоторые элементы приложения оказываются скрыты под этой занятой частью экрана.

Для решения этой проблемы в React Native существует компонент <SafeAreaView>. Он оборачивает остальные ваши компоненты, и вы можете быть уверены, что ни один элемент не попадет под пользовательский интерфейс.

В качестве альтернативы вы можете использовать flex: 1.

По умолчанию React Native использует Flexbox, поэтому вам не нужно использовать display: flex. В отличие от веб-версии, в которой для flexDirection по умолчанию установлено значение row, React Native использует для flexDirection значение column. Параметр flex: 1 применит flex-grow к компоненту, и он будет занимать всю основную ось контейнера Flexbox.

Оба подхода гарантируют, что ваш контент останется видимым и доступным на экране.

Внутренние поля и внешние отступы

В веб-версии можно использовать сокращения margin и padding.

В React Native есть дополнительные вспомогательные параметры стилизации для применения полей и отступов.

Например, чтобы задать элементу верхнее и нижнее внутреннее поле со значением 20, вы поступить следующим образом:

<View style={{marginVertical: 20}}></View>

Вы также можете добавить внешний отступ сверху и снизу:

<View style={{paddingVertical: 20}}></View>

Среди вспомогательных настроек, кроме Vertical, есть также Horizontal: paddingHorizontal и marginHorizontal.

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

Если flexDirection является row, то marginStart ведет себя как marginLeft.

Если flexDirection является row-reverse, то marginStart ведет себя как marginRight.

Также имейте в виду, что Start и End переопределяют marginLeft и marginRight, paddingLeft и paddingRight.

Добавление теней и границ

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

Также есть параметр borderRadius, который задает радиус каждому углу. Вы можете определить каждый угол с помощью top-start, top-end, bottom-start и bottom-end, например:

borderTopStartRadius: 20

или же вы можете использовать более простые версии top-left, top-right и т.д.

borderStyle позволяет задать пунктирные или сплошные границы.

Что касается теней в React Native, то параметр box-shadow, который вы, возможно, знаете, использовать нельзя.

Вместо этого в React Native есть такие стили, которые работают только в iOS:

shadowOffset: { height: 3, width: 3 },
shadowColor: '#000000',
shadowOpacity: 0.5,
shadowRadius: 5

В более старых версиях Android нет хорошего встроенного решения для React Native. Вы можете установить свойство elevation, но оно не поддерживает пользовательских настроек и не будет работать с другими стилями типа border и background-color.

Устранение различий между платформами

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

Тем не менее, вы обнаружите довольно существенную разницу во внешнем виде приложения (даже с идеальным, чистым стилем) между разными платформами.

Чтобы для разных платформ стили были одинаковыми, давайте импортируем компонент Platform из React Native.

import { View, StyleSheet, Platform } from 'react-native';

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

const styles = StyleSheet.create({
  container: {
    height: Platform.OS === 'android' ? 100 : 20,
    backgroundColor: Platform.OS === 'ios' ? 'yellow' : 'blue',
    ...Platform.select({ ios: { width: 100 } })
  }
})

Обратите внимание на два разных способа установки стилей для разных платформ. Один из способов применяет тернарный оператор:

height: Platform.OS === 'ios' ? 100, 20

Этот вариант хорошо работает в большинстве ситуаций.

Еще есть …Platform.select(). Этот вариант позволяет вам указать стиль для одной или двух платформ:

...Platform.select({ ios { width: 100 }, android: { width: 75 } })

Этот код определит ширину 100 для платформ iOS и ширину 75 для платформ Android.

Заключение

В этом мануале вы узнали, как применять стили в приложениях React Native.

Работая с React Native, вы заметите, что стили различаются от компонента к компоненту (в отличие от веб-версии, где практически каждый элемент может использовать любой стиль).

Много полезного можно найти в официальной документации React Native по стилям для компонента Text. Он не обладает полным набором свойств, доступных в веб-версии. А некоторые компоненты, такие как Button, даже не поддерживают свойство style.

Вы также можете использовать такие компоненты, как <TouchableOpacity> и, конечно же, <View>, для них доступно большинство свойств стилизации. В качестве альтернативы вы также можете импортировать библиотеку styled-components и использовать обычный CSS.

Читайте также: Как работает Bulma CSS в React

Tags: , ,

Добавить комментарий