StyleSheet — was es ist, Styles erstellen in React Native

Was ist StyleSheet?

StyleSheet — eine integrierte React Native API zum Definieren von Komponentenstilen. Anders als CSS in der Webentwicklung verwendet RN JavaScript-Objekte zur Beschreibung von Styles. StyleSheet.create — die Schlüsselmethode — nimmt ein Style-Objekt entgegen und gibt ein Objekt mit numerischen IDs zurück.

StyleSheet ist Teil des React Native Kerns und erfordert keine Installation zusätzlicher Pakete. Laut Meta (2026) verwenden 95% der React Native Projekte StyleSheet.create für statische Styles. Alternativen: styled-components, Emotion, NativeWind (Tailwind für RN) — aber das integrierte StyleSheet bleibt der Standard für den Kern.

Geschichte und Entwicklung

In den frühen Versionen von React Native (2015) wurden Styles ausschließlich als Inline-Objekte definiert. StyleSheet.create erschien in RN 0.4 als Optimierung. Das Konzept stammt aus CSS: Trennen Sie Styles von der Logik für Lesbarkeit und Leistung. Im Laufe der Jahre wurde die API erweitert: absoluteFill, hairlineWidth, flatten kamen hinzu.

StyleSheet.create vs Inline-Styles

Der Unterschied zwischen StyleSheet.create und Inline-Styles ist entscheidend für die Leistung. Ein Inline-Style ist ein einfaches JavaScript-Objekt, das bei jedem Rendern des Komponenten erstellt wird. StyleSheet.create — ein Objekt, das einmal beim Modulladen erstellt und in eine numerische ID umgewandelt wird.

Beim Übergeben eines Inline-Styles sendet React Native jedes Mal das gesamte Objekt über die JavaScript-Native-Brücke. Bei einem Komponenten mit komplexen Styles werden dutzende Eigenschaften bei jedem Rendern übertragen. StyleSheet.create übergibt nur eine numerische ID und reduziert so die Brückenlast.

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

// Inline-Style — erzeugt bei jedem Rendern ein neues Objekt
<View style={{
  flex: 1,
  padding: 16,
  backgroundColor: '#f5f5f5',
  borderRadius: 8,
}} />

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

Wann Inline verwenden: für dynamische Styles, die vom Zustand abhängen (gedrückt, ausgewählt, aktiv). Für statische Styles verwenden Sie immer StyleSheet.create. Regel: statisch → create, dynamisch → Inline-Funktion.

Flexbox-Layout mit StyleSheet

Flexbox — der einzige Layout-Mechanismus in React Native (CSS Grid wird nicht unterstützt, float fehlt). StyleSheet.create wird verwendet, um Flex-Container und ihre Kindelemente zu beschreiben. Wichtige Eigenschaften: flex (Füllkoeffizient), flexDirection (row | column), justifyContent, alignItems.

Standardmäßig ist flexDirection in React Native column (in CSS — row). Dies ist das Erste, was Sie beim Wechsel von der Webentwicklung beachten sollten. Alle View-Komponenten sind standardmäßig Flex-Container. Zum Zentrieren eines Elements verwenden Sie 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',
  },
});

Wichtig: In React Native werden alle Größen ohne Einheiten angegeben (nur eine Zahl). Prozentangaben funktionieren, aber nur für Breite und Höhe relativ zum Eltern-Element. margin und padding akzeptieren Zahlen. Für Responsivität verwenden Sie flex statt Prozentangaben — es ist zuverlässiger auf verschiedenen Bildschirmen.

StyleSheet API: create, flatten, hairlineWidth, absoluteFill

StyleSheet API umfasst neben create mehrere Methoden. StyleSheet.flatten führt ein Array von Styles zu einem einzigen Objekt zusammen — nützlich für Komposition und die Übergabe von Styles an Drittanbieter-Komponenten. StyleSheet.hairlineWidth gibt die minimale sichtbare Linienbreite auf dem Gerät zurück.

StyleSheet.absoluteFill — ein vordefinierter Style { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }. Wird für Overlay-Ebenen, modale Fenster und absolute Positionierung über den gesamten Bildschirm verwendet. StyleSheet.absoluteFillObject — dasselbe, aber als Objekt zur Erweiterung.

// flatten — Styles zusammenführen
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 — minimale Linie
const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ccc',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
});

StyleSheet.hairlineWidth ist nützlich für Trennlinien und Rahmen — es sieht immer wie 1 physikalischer Pixel aus, unabhängig von der Bildschirmdichte. Auf Retina-Displays sind das 0,5 logische Punkte, auf normalen — 1 Punkt. Verwenden Sie hairlineWidth nicht für Elemente, die eine streng bestimmte Größe haben müssen.

Responsives Layout mit Dimensions API

Dimensions API wird zusammen mit StyleSheet für responsives Layout auf verschiedenen Bildschirmgrößen verwendet. Dimensions.get('window') gibt die Breite und Höhe des Fensters zurück. Für reaktive Updates bei Bildschirmdrehung verwenden Sie den Hook useWindowDimensions von React Native.

Obwohl StyleSheet.create keine Media Queries wie CSS unterstützt, können Sie Werte basierend auf Dimensions innerhalb von create berechnen oder dynamische Styles über eine Funktion verwenden. Für Breakpoints erstellen Sie separate Styles für verschiedene Breitenbereiche.

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 wird automatisch bei Bildschirmdrehung und Fenstergrößenänderung auf Tablets mit Split View aktualisiert. Für SSR (React Native Web) stellen Sie sicher, dass Dimensions.get nach dem Mounten des Komponenten aufgerufen wird, um Diskrepanzen zwischen Server und Client zu vermeiden.

Style-Organisation in einem Projekt

StyleSheet-Organisation in einem Projekt beeinflusst die Wartbarkeit und Wiederverwendbarkeit von Code. Drei Ansätze: lokale Styles innerhalb des Komponenten (styles.js neben dem Komponenten), globale Styles (theme.js mit Farb-, Abstands- und Typographie-Konstanten) und modulare Styles durch Komposition.

Empfohlene Struktur: theme.js mit Farb-, Größen- und Typographie-Konstanten; Component.styles.js neben jedem Komponenten für dessen spezifische Styles; StyleSheet.flatten zur Kombination von Basis- und spezifischen Styles. Für große Projekte verwenden Sie ein Design System mit Theme-Generierung.

// theme.js — globale Konstanten
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',
  },
});

Vorteile modularer Organisation: Single Source of Truth für Farben und Abstände, vereinfachtes Refactoring (primary ändern — alle Buttons aktualisieren), Style-Wiederverwendung durch flatten, Lesbarkeit und Vorhersagbarkeit des Codes. Für TypeScript-Projekte fügen Sie Typen für das Theme via declare module hinzu.