StyleSheet — mi ez, stílusok létrehozása a React Native-ben

Mi az a StyleSheet?

StyleSheet — beépített API a React Native-ben komponenstílusok meghatározására. A webfejlesztésben használt CSS-sel ellentétben az RN JavaScript-objektumokat használ a stílusok leírására. A StyleSheet.create — a kulcsfontosságú metódus, amely egy stílusokkal rendelkező objektumot fogad és egy numerikus azonosítókkal rendelkező objektumot ad vissza.

A StyleSheet a React Native magjának része, és nem igényel további csomagok telepítését. A Meta adatai szerint (2026) a React Native projektek 95%-a használja a StyleSheet.create-t statikus stílusokhoz. Alternatívák: styled-components, Emotion, NativeWind (Tailwind RN-hez) — de a beépített StyleSheet továbbra is a mag szabványa marad.

Történelem és fejlődés

A React Native korai verzióiban (2015) a stílusokat kizárólag inline-objektumokkal határozták meg. A StyleSheet.create az RN 0.4-ben jelent meg optimalizálásként. A koncepció a CSS-ből származik: válassza el a stílusokat a logikától az olvashatóság és a teljesítmény érdekében. Az évek során az API bővült: hozzáadták az absoluteFill, hairlineWidth, flatten elemeket.

StyleSheet.create vs inline-stílusok

A StyleSheet.create és az inline-stílusok közötti különbség kritikus a teljesítmény szempontjából. Inline-stílus — egy közönséges JavaScript-objektum, amely a komponens minden renderelésekor létrejön. StyleSheet.create — egy objektum, amely egyszer jön létre a modul betöltésekor és numerikus ID-vé alakul.

Inline-stílus átadásakor a React Native minden alkalommal elküldi a teljes objektumot a JavaScript-Native hídon keresztül. Egy összetett stílusú komponens esetében ez több tucat tulajdonság, amelyek minden rendereléskor átadásra kerülnek. A StyleSheet.create csak egy numerikus azonosítót ad át, csökkentve a híd terhelését.

// StyleSheet.create — optimalizált megközelítés
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
    borderRadius: 8,
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
});

// Inline style — minden rendereléskor új objektumot hoz létre
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

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

Mikor használjunk inline-t: állapottól függő dinamikus stílusokhoz (pressed, selected, active). Statikus stílusokhoz mindig használja a StyleSheet.create-t. Szabály: statikus → create, dinamikus → inline-függvény.

Flexbox elrendezés a StyleSheet segítségével

Flexbox — az egyetlen elrendezési mechanizmus a React Native-ben (a CSS Grid nem támogatott, a float pedig nem létezik). A StyleSheet.create a flex-konténerek és gyermekelemek leírására szolgál. Főbb tulajdonságok: flex (kitöltési együttható), flexDirection (row | column), justifyContent, AlignItems.

Alapértelmezés szerint a flexDirection a React Native-ben column (a CSS-ben — row). Ez az első dolog, amit meg kell jegyezni a webfejlesztésről való áttéréskor. Minden View alapértelmezés szerint flex-konténer. Egy elem középre igazításához használja az AlignItems: 'center' + justifyContent: 'center' kifejezést.

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',
  },
});

Fontos: a React Native-ben minden méret egységek nélkül van megadva (csak egy szám). A százalékok működnek, de csak a width és height esetében a szülőhöz viszonyítva. A margin és padding számokat fogad el. Az alkalmazkodóképesség érdekében használjon flex-et a százalékok helyett — ez megbízhatóbb a különböző képernyőkön.

StyleSheet API: create, flatten, hairlineWidth, absoluteFill

StyleSheet API a create mellett több metódust is tartalmaz. A StyleSheet.flatten egy stílustömböt egyetlen objektumba egyesít — hasznos a kompozícióhoz és a stílusok harmadik fél komponenseinek átadásához. A StyleSheet.hairlineWidth visszaadja a minimális látható vonalszélességet az eszközön.

StyleSheet.absoluteFill — egy előre meghatározott stílus { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }. Átfedő rétegekhez, modális ablakokhoz és teljes képernyős abszolút pozicionáláshoz használatos. StyleSheet.absoluteFillObject — ugyanaz, de objektum formájában a kiterjesztéshez.

// flatten — stílusok egyesítése
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 — minimális vonal
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth hasznos elválasztókhoz és szegélyekhez — mindig 1 fizikai pixelnek néz ki, függetlenül a képernyő sűrűségétől. Retina kijelzőkön ez 0.5 logikai pont, normál esetben — 1 pont. Ne használja a hairlineWidth-t olyan elemekhez, amelyeknek szigorúan meghatározott méretűnek kell lenniük.

Reszponzív elrendezés a Dimensions API-val

Dimensions API a StyleSheet-szel együtt használatos a különböző képernyőméretekhez igazodó reszponzív elrendezéshez. A Dimensions.get('window') visszaadja az ablak szélességét és magasságát. A képernyő elforgatásakor történő reaktív frissítéshez használja a useWindowDimensions hook-ot a React Native-ből.

Bár a StyleSheet.create nem támogatja a media query-ket, mint a CSS, kiszámíthat értékeket a Dimensions alapján a create-en belül, vagy használhat dinamikus stílusokat egy függvényen keresztül. A töréspontokhoz hozzon létre külön stílusokat a különböző szélességi tartományokhoz.

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 automatikusan frissül a képernyő elforgatásakor és az ablak méretének változásakor a Split View-val rendelkező tableteken. SSR (React Native Web) esetén győződjön meg arról, hogy a Dimensions.get a komponens csatlakoztatása után kerül meghívásra a szerver és a kliens közötti eltérések elkerülése érdekében.

Stílusok szervezése a projektben

A StyleSheet szervezése a projektben befolyásolja a kód karbantarthatóságát és újrafelhasználhatóságát. Három megközelítés: helyi stílusok a komponensen belül (styles.js a komponens mellett), globális stílusok (theme.js szín-, térköz- és tipográfiai állandókkal) és moduláris stílusok kompozíció segítségével.

Ajánlott struktúra: theme.js színek, méretek és tipográfia állandóival; Component.styles.js minden komponens mellett annak specifikus stílusaihoz; StyleSheet.flatten az alap- és specifikus stílusok kombinálásához. Nagy projektekhez használjon Design System-et téma-generálással.

// theme.js — globális konstansok
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',
  },
});

A moduláris szervezés előnyei: egyetlen igazságforrás a színekhez és térközökhöz, a refaktorálás egyszerűsítése (megváltoztatta a primary-t — az összes gomb frissült), a stílusok újrafelhasználása a flatten segítségével, a kód olvashatósága és kiszámíthatósága. TypeScript-projektekhez adjon típusokat a témához a declare module segítségével.