0Pricing
React Academy · Lektion

Styling mit StyleSheet-API und Flexbox

Schreiben Sie mobile Styles mit StyleSheet.create und Flexbox, ohne CSS-Klassennamen zu verwenden.

Styling mit StyleSheet-API und Flexbox ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Kein CSS in React Native

React Native verwendet eine JavaScript-API für Styles – keine CSS-Dateien, keine Klassennamen und keine Kaskadierung. Styles sind JavaScript-Objekte, die über die style-Prop angewendet werden.

StyleSheet.create()

Schließen Sie Style-Objekte in StyleSheet.create() ein, um eine bessere Performance (Styles werden einmal validiert und optimiert) sowie die Autovervollständigung der IDE zu erhalten.

import { StyleSheet, View, Text } from 'react-native';

function Card() {
  return (
    <View style={styles.card}>
      <Text style={styles.title}>Hello</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: { padding: 16, backgroundColor: '#fff', borderRadius: 8, shadowColor: '#000', shadowOpacity: 0.1, elevation: 2 },
  title: { fontSize: 18, fontWeight: 'bold', color: '#111' },
});

Inline-Styles

Wenden Sie Styles direkt über die style-Prop an. Die Array-Syntax führt mehrere Style-Objekte zusammen – spätere Styles überschreiben frühere.

<View style={{ padding: 16, backgroundColor: '#f5f5f5' }} />

// Array merging:
<Text style={[styles.base, isActive && styles.active, { marginTop: 8 }]} />

Flexbox in React Native

React Native verwendet standardmäßig Flexbox für das Layout, allerdings mit anderen Standardwerten als das Web: flexDirection ist standardmäßig 'column' (nicht 'row'), und flex: 1 füllt den verfügbaren Platz.

const styles = StyleSheet.create({
  container: {
    flex: 1,                   // fill available space
    flexDirection: 'column',   // default in RN (web default is 'row')
    justifyContent: 'center',  // main axis alignment
    alignItems: 'center',      // cross axis alignment
  },
});

Zeilenlayout

Verwenden Sie flexDirection: 'row', um untergeordnete Elemente horizontal anzuordnen – ähnlich wie bei CSS mit display: flex; flex-direction: row.

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12, // gap is supported in RN 0.71+
  },
});

<View style={styles.row}>
  <Image source={avatar} />
  <Text>{username}</Text>
</View>

flex vs. width/height

Verwenden Sie flex: N für proportionale Größen. flex: 1 füllt den gesamten verbleibenden Platz; flex: 2 erhält doppelt so viel Platz wie Geschwisterelemente mit flex: 1.

// Sidebar takes 1/3, content takes 2/3:
<View style={{ flexDirection: 'row', flex: 1 }}>
  <View style={{ flex: 1, backgroundColor: '#eee' }}>Sidebar</View>
  <View style={{ flex: 2 }}>Content</View>
</View>

Absolute Positionierung

Verwenden Sie position: 'absolute' zusammen mit top, right, bottom und left für Overlay-Elemente – identisch zur absoluten CSS-Positionierung innerhalb eines relativ positionierten Elternelements.

const badge = StyleSheet.create({
  badge: {
    position: 'absolute',
    top: -4,
    right: -4,
    width: 16,
    height: 16,
    borderRadius: 8,
    backgroundColor: 'red',
  },
});

Plattformspezifische Styles

Verwenden Sie Platform.OS oder Platform.select(), um unterschiedliche Styles auf iOS und Android anzuwenden.

import { Platform } from 'react-native';

const styles = StyleSheet.create({
  shadow: {
    ...Platform.select({
      ios: { shadowColor: '#000', shadowOpacity: 0.2, shadowRadius: 4 },
      android: { elevation: 4 },
    }),
  },
});

Farben

React Native akzeptiert CSS-Farbangaben (hexadezimal, rgb, benannt) sowie die PlatformColor-API für Systemfarben.

import { PlatformColor } from 'react-native';

// System color — adapts to dark mode automatically:
const labelColor = PlatformColor('label', '#000'); // iOS 'label' semantic color

Dynamische Styles mit Props

Berechnen Sie Styles aus Props innerhalb der Komponente. Übergeben Sie eine Funktion an StyleSheet oder berechnen Sie das Style-Objekt direkt inline.

function Badge({ color, size = 16 }: { color: string; size?: number }) {
  return (
    <View
      style={[
        styles.badge,
        { backgroundColor: color, width: size, height: size, borderRadius: size / 2 },
      ]}
    />
  );
}

const styles = StyleSheet.create({ badge: { position: 'absolute' } });

Schnelltest

Wie lautet flexDirection in React Native standardmäßig (anders als im Web)?

Zusammenfassung

Verwenden Sie StyleSheet.create() für optimierte Styles und wenden Sie sie über die style-Prop an. Flexbox verwendet in React Native standardmäßig flexDirection: 'column', und flex: 1 füllt den verbleibenden Platz. Verwenden Sie Platform.select() für betriebssystemspezifische Schatten-Styles.

Häufig gestellte Fragen

Ist die Lektion „Styling mit StyleSheet-API und Flexbox“ kostenlos?

Ja — der vollständige Text von „Styling mit StyleSheet-API und Flexbox“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Styling mit StyleSheet-API und Flexbox“?

Schreiben Sie mobile Styles mit StyleSheet.create und Flexbox, ohne CSS-Klassennamen zu verwenden. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Styling mit StyleSheet-API und Flexbox“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. React-Native-Core-Components vs. Web-DOM
  2. Styling mit StyleSheet-API und Flexbox
  3. Navigation mit Expo Router
  4. Auf Geräte-APIs zugreifen: Kamera, Standort und Push-Benachrichtigungen
← Zurück zu React Academy