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 срещу inline-стилове

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

При предаване на inline-стил, React Native всеки път изпраща целия обект през моста JavaScript-Native. За компонент със сложни стилове това са десетки свойства, предавани при всяко рендиране. StyleSheet.create предава само числов идентификатор, намалявайки натоварването на моста.

// StyleSheet.create — оптимизиран подход
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

// Inline style — създава нов обект при всяко рендиране
<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

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

StyleSheet.absoluteFill — предварително дефиниран стил { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }. Използва се за overlay слоеве, модални прозорци и абсолютно позициониране на цял екран. StyleSheet.absoluteFillObject — същото нещо, но под формата на обект за разширяване.

// flatten — сливане на стилове
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 — минимална линия
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') връща ширината и височината на прозореца. За реактивно обновяване при завъртане на екрана използвайте hook-а useWindowDimensions от React Native.

Въпреки че StyleSheet.create не поддържа media queries като CSS, можете да изчислявате стойности на базата на Dimensions вътре в create или да използвате динамични стилове чрез функция. За точки на прекъсване създавайте отделни стилове за различни диапазони на ширина.

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 — глобални константи
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.