Стилизация

В React Native стили задаются не через строки или CSS-файлы, а через объекты JavaScript. Это обеспечивает типобезопасность (особенно в TypeScript), предотвращает конфликты имён и улучшает производительность.

Стили как объекты

Каждое свойство стиля записывается в виде пары ключ–значение внутри объекта. Такой объект передаётся в проп style компонента:

<View style={{ padding: 16, backgroundColor: '#f0f0f0' }}>
  <Text style={{ fontSize: 18, color: '#333' }}>Привет, мир!</Text>
</View>

Обратите внимание:

  • Значения без единиц измерения (например, padding: 16) интерпретируются как пиксели.
  • Цвета указываются в форматах #rgb, #rrggbb, rgb(), rgba() или по имени ('red').
  • Имена свойств пишутся в camelCase: backgroundColor, а не background-color.

StyleSheet.create()

Для оптимизации производительности рекомендуется объявлять стили с помощью StyleSheet.create(). Это позволяет React Native сериализовать стили один раз при загрузке модуля, а не при каждом рендере.

Пример:

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#000',
  },
});

// Использование
<View style={styles.container}>
  <Text style={styles.title}>Заголовок</Text>
</View>

Использование StyleSheet.create() также помогает избежать ошибок — некоторые неверные значения будут вызывать предупреждения в режиме разработки.

Поддерживаемые свойства

React Native поддерживает ограниченный набор CSS-свойств. Основные из них:

  • Layout: width, height, flex, flexDirection, justifyContent, alignItems
  • Отступы: margin, marginTop, padding, paddingHorizontal и т.д.
  • Фон: backgroundColor
  • Текст: fontSize, color, fontWeight, textAlign, lineHeight
  • Границы: borderWidth, borderColor, borderRadius

Что не поддерживается

Важно помнить, что в React Native отсутствуют:

  • Псевдоклассы (:hover, :active)
  • Медиазапросы
  • Свойства вроде float, display: block/inline
  • Относительные единицы (em, rem, % для большинства свойств)
  • position: absolute с процентными значениями (размеры должны быть в пикселях или через flex)

Все позиционирование строится на основе Flexbox или абсолютного позиционирования с фиксированными координатами (top, left, right, bottom в пикселях).

Передача нескольких стилей

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

<View style={[styles.container, { marginTop: 20 }]}>
  {/* ... */}
</View>

Это особенно полезно для условного применения стилей:

<View style={[styles.base, isActive && styles.active]}>

Такой подход безопасен: если условие ложно, false будет проигнорирован.