Hvordan fungerer styling i React Native?

Question

Accepted Answer

React Native styling bruger **JavaScript-objekter** (ikke CSS-filer) — anvendt via `style`-propt, ofte organiseret med `StyleSheet`. Det bruger et **Flexbox-baseret** layout-system. Koncepterne ligner CSS, men med JavaScript-syntaks og nogle forskelle. ## Styling med JavaScript-objekter ```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 er **JavaScript-objekter** med **camelCase** egenskabsnavne (`backgroundColor`, ikke `background-color`); `StyleSheet.create` organiserer dem. Du kan også videregive inline-objekter eller arrays af stile. ## Flexbox-layout (standarden) ```jsx // React Native uses FLEXBOX for layout (like CSS flexbox, but flexDirection defaults // to 'column', not 'row') ``` ## Forskelle fra 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 ``` ## Hvorfor det betyder noget At forstå styling i React Native er fundamentalt, fordi **styling er essentielt for at bygge enhver UI**, og React Natives tilgang adskiller sig fra web CSS, så det er vigtig praktisk viden. React Native styler UIs med **JavaScript-objekter** (via `style`-propt, organiseret med `StyleSheet`) i stedet for CSS-filer — og at forstå dette (camelCase egenskabsnavne som `backgroundColor`, definere stile som JS-objekter, kombinere stile med arrays) er nødvendigt for at style enhver React Native-komponent. At forstå det **Flexbox-baserede layout-system** er særligt vigtig: React Native bruger Flexbox til layout (som CSS Flexbox, med flexDirection, justifyContent, alignItems), men med den vigtige forskel, at **flexDirection som standard er 'column'** (ikke 'row' som på nettet) — et almindeligt forvirrende punkt. Flexbox er den primære layout-mekanisme, så at forstå den er essentielt for at arrangere UIs. At forstå **forskellene fra web CSS** er vigtig især for web-udviklere: JS-objekter med camelCase i stedet for CSS-filer/klasser, enhedsløse numeriske værdier, en delmængde af CSS-egenskaber (ikke alt hvad nettet har), column-default flexbox, og ingen cascade/arv som CSS (stile er pr. komponent) — disse forskelle er almindelige stolpersten, som at forstå afklarer. Mens koncepterne ligner CSS (hvilket gør det tilgængeligt for web-udviklere), adskiller syntaksen og nogle adfærd sig, så at forstå React Natives specifikke tilgang er nødvendigt. Da styling er essentielt for at bygge enhver UI og React Natives JS-objekt, Flexbox-baseret tilgang (med dens forskelle fra web CSS) er hvordan det gøres, at forstå styling i React Native er væsentlig, grundlæggende praktisk viden — nødvendig for at bygge enhver React Native-grænseflade, og vigtig for web-udviklere at forstå forskellene fra CSS, en kernefærdighed, der bruges konstant i React Native UI-udvikling.