StyleSheet — что это, создание стилей в React Native

Что такое StyleSheet?

StyleSheet — встроенный API React Native для определения стилей компонентов. В отличие от CSS в веб-разработке, RN использует JavaScript-объекты для описания стилей. StyleSheet.create — ключевой метод, который принимает объект со стилями и возвращает объект с числовыми идентификаторами.

StyleSheet входит в ядро React Native и не требует установки дополнительных пакетов. По данным Meta (2026), 95% проектов на React Native используют StyleSheet.create для статических стилей. Альтернативы: styled-components, Emotion, NativeWind (Tailwind для RN) — но встроенный StyleSheet остаётся стандартом для ядра.

История и эволюция

В первых версиях React Native (2015) стили задавались исключительно inline-объектами. StyleSheet.create появился в RN 0.4 как оптимизация. Концепция взята из CSS: отделите стили от логики для читаемости и производительности. С годами API расширился: добавились absoluteFill, hairlineWidth, flatten.

StyleSheet.create vs inline-стили

Разница между StyleSheet.create и inline-стилями критически важна для производительности. Inline-стиль — обычный JavaScript-объект, создаваемый при каждом рендере компонента. StyleSheet.create — объект, создаваемый один раз при загрузке модуля и преобразованный в числовой ID.

При передаче inline-стиля React Native каждый раз отправляет весь объект через мост JavaScript-Native. Для компонента со сложными стилями это десятки свойств, передаваемых при каждом рендере. StyleSheet.create передаёт только число-идентификатор, снижая нагрузку на мост.

// StyleSheet.create — optimized approach
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

// Inline style — creates a new object on every render
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

<Text style={styles.title}>Title</Text>

Когда использовать inline: для динамических стилей, зависящих от состояния (pressed, selected, active). Для статических стилей всегда используйте StyleSheet.create. Правило: статика → create, динамика → inline-функция.

Flexbox вёрстка через StyleSheet

Flexbox — единственный механизм вёрстки в React Native (CSS Grid не поддерживается, а float отсутствует). StyleSheet.create используется для описания flex-контейнеров и их дочерних элементов. Основные свойства: flex (коэффициент заполнения), flexDirection (row | column), justifyContent, alignItems.

По умолчанию flexDirection в React Native — column (в CSS — row). Это первое, что нужно запомнить при переходе с веб-разработки. Все View по умолчанию являются flex-контейнерами. Для центрирования элемента используйте alignItems: 'center' + justifyContent: 'center'.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
  },
  box: {
    width: 50,
    height: 50,
    backgroundColor: 'blue',
  },
});

Важно: в React Native все размеры задаются без единиц (просто число). Проценты работают, но только для width и height относительно родителя. margin и padding принимают числа. Для адаптивности используйте flex вместо процентов — это надёжнее на разных экранах.

API StyleSheet: create, flatten, hairlineWidth, absoluteFill

StyleSheet API включает несколько методов помимо create. StyleSheet.flatten объединяет массив стилей в один объект — полезно для композиции и передачи стилей в сторонние компоненты. StyleSheet.hairlineWidth возвращает минимальную видимую ширину линии на устройстве.

StyleSheet.absoluteFill — предопределённый стиль { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }. Используется для overlay-слоёв, модальных окон и абсолютного позиционирования на весь экран. StyleSheet.absoluteFillObject — то же самое, но в виде объекта для расширения.

// flatten — merge styles
const base = StyleSheet.create({
  button: { padding: 12, borderRadius: 8 },
  primary: { backgroundColor: 'blue' },
});

const combined = StyleSheet.flatten([base.button, base.primary]);
// { padding: 12, borderRadius: 8, backgroundColor: 'blue' }

// hairlineWidth — minimal line
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth полезен для разделителей и границ — он всегда выглядит как 1 физический пиксель независимо от плотности экрана. На Retina-дисплеях это 0.5 логических пункта, на обычных — 1 пункт. Не используйте hairlineWidth для элементов, которые должны быть строго определённого размера.

Адаптивная вёрстка с Dimensions API

Dimensions API используется вместе со StyleSheet для адаптивной вёрстки под разные размеры экрана. Dimensions.get('window') возвращает ширину и высоту окна. Для реактивного обновления при повороте экрана используйте хук useWindowDimensions из React Native.

Хотя StyleSheet.create не поддерживает медиа-запросы как CSS, вы можете вычислять значения на основе Dimensions внутри create или использовать динамические стили через функцию. Для breakpoints создавайте отдельные стили под разные диапазоны ширины.

import { useWindowDimensions } from 'react-native';

const ResponsiveCard = () => {
  const { width } = useWindowDimensions();
  const isLarge = width > 768;

  return (
    <View style={[styles.card, isLarge && styles.cardLarge]}>
      <Text>Responsive card</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  card: {
    width: '100%',
    padding: 16,
  },
  cardLarge: {
    width: '50%',
    alignSelf: 'center',
  },
});

useWindowDimensions автоматически обновляется при повороте экрана и изменении размера окна на планшетах с Split View. Для SSR (React Native Web) убедитесь, что Dimensions.get вызывается после монтирования компонента, чтобы избежать расхождений между сервером и клиентом.

Организация стилей в проекте

Организация StyleSheet в проекте влияет на поддерживаемость и переиспользование кода. Три подхода: локальные стили внутри компонента (styles.js рядом с компонентом), глобальные стили (theme.js с константами цветов, отступов, типографики), и модульные стили через композицию.

Рекомендуемая структура: theme.js с константами цветов, размеров и типографики; Component.styles.js рядом с каждым компонентом для его специфичных стилей; StyleSheet.flatten для комбинации базовых и специфичных стилей. Для крупных проектов используйте Design System с генерацией темы.

// theme.js — global constants
export const colors = {
  primary: '#6200EE',
  background: '#FFFFFF',
  text: '#1C1B1F',
  surface: '#F5F5F5',
};

export const spacing = {
  xs: 4, sm: 8, md: 16, lg: 24, xl: 32,
};

export const typography = {
  h1: { fontSize: 24, fontWeight: 'bold', lineHeight: 32 },
  body: { fontSize: 16, lineHeight: 24 },
};

// Button.styles.js
import { colors, spacing, typography } from './theme';

export default StyleSheet.create({
  button: {
    backgroundColor: colors.primary,
    paddingVertical: spacing.sm,
    paddingHorizontal: spacing.lg,
    borderRadius: 8,
  },
  text: {
    ...typography.body,
    color: '#FFFFFF',
    textAlign: 'center',
  },
});

Преимущества модульной организации: единый источник правды для цветов и отступов, упрощение рефакторинга (изменили primary — обновились все кнопки), переиспользование стилей через flatten, читаемость и предсказуемость кода. Для TypeScript-проектов добавьте типы для темы через declare module.