Wie funktioniert Styling in React Native?

Question

Accepted Answer

React Native Styling verwendet **JavaScript-Objekte** (keine CSS-Dateien) — angewendet über die `style` Prop, oft organisiert mit `StyleSheet`. Es nutzt ein **Flexbox-basiertes** Layout-System. Die Konzepte ähneln CSS, unterscheiden sich aber in JavaScript-Syntax und einigen Details. ## Styling mit JavaScript-Objekten ```jsx import { StyleSheet, View, Text } from 'react-native'; function Card() { return ( Hello ); } // StyleSheet.create — define styles as JS objects (camelCase properties) const styles = StyleSheet.create({ card: { padding: 16, backgroundColor: '#fff', // camelCase (not background-color) borderRadius: 8, }, title: { fontSize: 18, fontWeight: 'bold', color: '#333', }, }); ``` Stile sind **JavaScript-Objekte** mit **camelCase** Eigenschaftsnamen (`backgroundColor`, nicht `background-color`); `StyleSheet.create` organisiert sie. Sie können auch Inline-Objekte oder Arrays von Stilen übergeben. ## Flexbox Layout (Standard) ```jsx // React Native uses FLEXBOX for layout (like CSS flexbox, but flexDirection defaults // to 'column', not 'row') ``` ## Unterschiede zu Web-CSS ```text ✓ JS objects, camelCase props; no CSS files/classes; values often unitless numbers ✓ FLEXBOX by default (flexDirection defaults to 'column', unlike web's 'row') ✓ A subset of CSS properties (not everything web CSS has); some RN-specific behavior ✓ No cascade/inheritance like CSS (styles are per-component); use style arrays to combine ``` ## Warum es wichtig ist Styling in React Native zu verstehen ist grundlegend, weil **Styling wesentlich für die Erstellung einer UI ist**, und React Natives Ansatz sich von Web-CSS unterscheidet — daher ist es praktisches Muss-Wissen. React Native styles UIs mit **JavaScript-Objekten** (über die `style` Prop, organisiert mit `StyleSheet`) statt CSS-Dateien — und das Verstehen davon (camelCase Eigenschaftsnamen wie `backgroundColor`, Stile als JS-Objekte definieren, Stile mit Arrays kombinieren) ist notwendig für das Styling jeder React Native Komponente. Das **Flexbox-basierte Layout-System** zu verstehen ist besonders wichtig: React Native nutzt Flexbox für Layouts (wie CSS Flexbox mit flexDirection, justifyContent, alignItems), aber mit dem wichtigen Unterschied, dass **flexDirection standardmäßig auf 'column' eingestellt ist** (nicht 'row' wie im Web) — ein häufiger Verwirrungspunkt. Flexbox ist der primäre Layout-Mechanismus, daher ist sein Verständnis wesentlich für die Anordnung von UIs. Die **Unterschiede zu Web-CSS** zu verstehen ist wichtig besonders für Web-Entwickler: JS-Objekte mit camelCase statt CSS-Dateien/Klassen, einheitslose numerische Werte, eine Teilmenge von CSS-Eigenschaften (nicht alles was Web hat), das column-Standard Flexbox, und keine Kaskade/Vererbung wie CSS (Stile sind pro Komponente) — diese Unterschiede sind häufige Stolpersteine, deren Verständnis Klarheit schafft. Obwohl die Konzepte CSS ähneln (was es für Web-Entwickler zugänglich macht), unterscheiden sich Syntax und einige Verhaltensweisen, daher ist das Verstehen von React Natives spezifischem Ansatz notwendig. Weil Styling wesentlich für die Erstellung einer UI ist und React Natives JS-Objekt-, Flexbox-basierter Ansatz (mit seinen Unterschieden zu Web-CSS) ist wie es gemacht wird, ist das Verstehen von Styling in React Native essentiell, grundlegendes praktisches Wissen — notwendig für die Erstellung jeder React Native-Schnittstelle, und wichtig für Web-Entwickler, um die Unterschiede zu CSS zu verstehen, eine Kernfähigkeit, die ständig in der React Native UI-Entwicklung genutzt wird.