Styling mit StyleSheet statt CSS in React Native

In HTML/CSS trennen Sie Struktur (HTML) und Aussehen (CSS-Datei oder class-Attribut). In React Native gibt es kein CSS – stattdessen schreiben Sie Styles als JavaScript-Objekte. Dieses Kapitel zeigt die wichtigsten Unterschiede und Gemeinsamkeiten.

StyleSheet.create() statt .css-Datei

Statt einer externen .css-Datei mit Klassen wie .karte { padding: 16px; } definieren Sie in React Native ein JavaScript-Objekt mit StyleSheet.create():

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  karte: {
    padding: 16,
    backgroundColor: '#ffffff',
    borderRadius: 8,
  },
});

// Verwendung im JSX:
<View style={styles.karte}>...</View>

StyleSheet.create() ist technisch nicht zwingend nötig – Sie könnten auch ein normales Objekt {{ padding: 16 }} übergeben. Es bringt aber Performance-Vorteile und Fehlerprüfung, deshalb ist es der Standard.

Die wichtigsten Unterschiede zu CSS

HTML/Web	React Native
Einheiten wie `16px`, `1em`, `%`	nur Zahlen ohne Einheit, z. B. `16` (= dichteunabhängige Pixel); `%` geht bei manchen Properties
`background-color` (kebab-case)	`backgroundColor` (camelCase) – alle CSS-Properties werden zu camelCase
`display: flex` ist eine Option von vielen	Flexbox ist der STANDARD-Layoutmodus jeder `View`, es gibt kein anderes Layoutsystem
`flex-direction: row` (Standard)	`flexDirection: 'column'` ist der Standard (nicht row wie im Web!)
CSS-Klassen kombinierbar via mehrerer `class`-Werte	Array von Style-Objekten: `style={{[styles.basis, styles.aktiv]}}`
Pseudo-Klassen wie `:hover`	gibt es nicht (keine Maus) – stattdessen `onPressIn`/`onPressOut` für Touch-Zustände

Achtung: Der Flexbox-Standardwert ist der größte Stolperstein für Web-Entwickler: Im Browser ist flex-direction standardmäßig row (nebeneinander). In React Native ist der Standard column (untereinander) – jede View stapelt ihre Kinder automatisch vertikal, bis Sie flexDirection: 'row' explizit setzen.

Vorschau: so wird unsere ProductCard aussehen

Noch keine echte Datei – nur eine Vorschau der Styles, die wir im nächsten Kapitel in components/ProductCard.js tatsächlich anlegen:

const styles = StyleSheet.create({
  card: {
    flexDirection: 'row',
    padding: 12,
    marginBottom: 8,
    backgroundColor: '#f9fafb',
    borderRadius: 8,
    alignItems: 'center',
  },
  image: { width: 60, height: 60, borderRadius: 4 },
  info: { marginLeft: 12, flex: 1 },
  name: { fontSize: 16, fontWeight: '600' },
  price: { fontSize: 14, color: '#6b7280' },
});

flex: 1 auf info sorgt dafür, dass dieser Bereich den restlichen verfügbaren Platz einnimmt – vergleichbar mit flex-grow: 1 in CSS. Im nächsten Kapitel verwenden wir genau diese Styles in unserer ersten eigenen Komponente.

Tipp: Tailwind-Erfahrung? Es gibt eine populäre Bibliothek namens NativeWind, die Tailwind-Klassennamen auf React-Native-Styles abbildet. Für dieses Tutorial bleiben wir bewusst beim eingebauten StyleSheet, damit Sie die Grundlagen ohne zusätzliche Abhängigkeit verstehen – NativeWind können Sie später jederzeit ergänzen.