Styling-Elemente in React Native

Ein Überblick über die wichtigsten Styling-Techniken, bevor wir uns konkreten UI-Mustern widmen: Style-Objekte kombinieren, wiederverwendbare Style-Konstanten, und Flexbox-Ausrichtung.

1. Beschreibung

Neben einem einzelnen StyleSheet-Eintrag pro style-Prop unterstützt React Native auch ARRAYS von Styles (später stehende Werte überschreiben frühere) und geteilte Konstanten für Farben/Abstände, um Konsistenz über eine ganze App hinweg zu sichern.

2. Kurzes Beispiel

// Mehrere Styles kombinieren: das Array wird von links nach rechts "gemergt"
<View style={[styles.basis, istAktiv && styles.aktiv]} />

3. Komplettes Projekt: gemeinsame Design-Konstanten

npx create-expo-app styling-demo
cd styling-demo

theme.js

export const FARBEN = {
  primaer: '#2563eb',
  hintergrund: '#f9fafb',
  text: '#111827',
  textGedaempft: '#6b7280',
  rand: '#e5e7eb',
};

export const ABSTAND = { klein: 8, mittel: 16, gross: 24 };

App.js

import { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { FARBEN, ABSTAND } from './theme';

const KATEGORIEN = ['Alle', 'Schuhe', 'Taschen', 'Jacken'];

export default function App() {
  const [ausgewaehlt, setAusgewaehlt] = useState('Alle');

  return (
    <View style={styles.container}>
      <View style={styles.chipZeile}>
        {KATEGORIEN.map((kategorie) => (
          <TouchableOpacity
            key={kategorie}
            style={[styles.chip, ausgewaehlt === kategorie && styles.chipAktiv]}
            onPress={() => setAusgewaehlt(kategorie)}
          >
            <Text
              style={[styles.chipText, ausgewaehlt === kategorie && styles.chipTextAktiv]}
            >
              {kategorie}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: FARBEN.hintergrund, paddingTop: 60, paddingHorizontal: ABSTAND.mittel },
  chipZeile: { flexDirection: 'row', flexWrap: 'wrap', gap: ABSTAND.klein },
  chip: { paddingVertical: 8, paddingHorizontal: 16, borderRadius: 20, borderWidth: 1, borderColor: FARBEN.rand },
  chipAktiv: { backgroundColor: FARBEN.primaer, borderColor: FARBEN.primaer },
  chipText: { color: FARBEN.textGedaempft },
  chipTextAktiv: { color: '#fff', fontWeight: '600' },
});

4. Erklärung

theme.js exportiert gewöhnliche JavaScript-Konstanten – kein spezielles React-Native-Feature, funktioniert genauso wie jeder andere Modul-Export.
[styles.chip, ausgewaehlt === kategorie && styles.chipAktiv] – ein Array aus Styles; ist die Bedingung false, wird einfach false im Array ignoriert (React Native überspringt nicht-Objekt-Einträge stillschweigend).
Später im Array stehende Styles überschreiben gleichnamige Eigenschaften früherer Einträge – deshalb steht chipAktiv NACH chip.

5. Ausgaben

Ausgabe

Eine Reihe abgerundeter "Chips" ("Alle", "Schuhe", "Taschen", "Jacken"). "Alle" ist anfangs blau ausgefüllt mit weißem Text, die anderen haben nur einen grauen Rand mit grauem Text. Antippen eines anderen Chips färbt IHN blau und setzt den vorherigen zurück.

Tipp: Eine zentrale theme.js-Datei mit Farben/Abständen ist besonders in größeren Apps Gold wert: Ändert sich die Markenfarbe, reicht EINE Zeile Änderung statt Dutzender einzelner StyleSheet-Blöcke.