Hvordan fungerer styling i React Native?

Question

Accepted Answer

React Native styling bruker **JavaScript-objekter** (ikke CSS-filer) — brukt via `style`-propen, ofte organisert med `StyleSheet`. Det bruker et **Flexbox-basert** layoutsystem. Konseptene likner CSS, men med JavaScript-syntaks og noen forskjeller. ## 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', }, }); ``` Stiler er **JavaScript-objekter** med **camelCase**-egenskapsnavn (`backgroundColor`, ikke `background-color`); `StyleSheet.create` organiserer dem. Du kan også sende inline-objekter eller stilmatriser. ## Flexbox-layout (standard) ```jsx // React Native uses FLEXBOX for layout (like CSS flexbox, but flexDirection defaults // to 'column', not 'row') ``` ## Forskjeller 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 er viktig Å forstå styling i React Native er fundamentalt fordi **styling er essensielt for å bygge hvilket som helst UI**, og React Natives tilnærming er annerledes enn web CSS, så det er nødvendig praktisk kunnskap. React Native stiler UI-er med **JavaScript-objekter** (via `style`-propen, organisert med `StyleSheet`) i stedet for CSS-filer — og det å forstå dette (camelCase-egenskapsnavn som `backgroundColor`, definere stiler som JS-objekter, kombinere stiler med matriser) er nødvendig for styling av hvilken som helst React Native-komponent. Å forstå det **Flexbox-baserte layoutsystemet** er særlig viktig: React Native bruker Flexbox for layout (som CSS Flexbox, med flexDirection, justifyContent, alignItems), men med den viktige forskjellen at **flexDirection som standard er 'column'** (ikke 'row' som på web) — et vanlig misforståelsespunkt. Flexbox er den primære layoutmekanismen, så det å forstå den er essensielt for å arrangere UI-er. Å forstå **forskjellene fra web CSS** er viktig særlig for webutviklere: JS-objekter med camelCase i stedet for CSS-filer/klasser, enhetsløse numeriske verdier, en delmengde av CSS-egenskaper (ikke alt web har), column-standard flexbox, og ingen kaskade/arv som CSS (stiler er per komponent) — disse forskjellene er vanlige fallgruver som forståelse avklarer. Skjønt konseptene likner CSS (noe som gjør det tilgjengelig for webutviklere), er syntaks og noen atferd annerledes, så det å forstå React Natives spesifikke tilnærming er nødvendig. Da styling er essensielt for å bygge hvilket som helst UI og React Natives JS-objekt, Flexbox-basert tilnærming (med dens forskjeller fra web CSS) er hvordan det gjøres, er det å forstå styling i React Native essensielt, grunnleggende praktisk kunnskap — nødvendig for å bygge hvilket som helst React Native-grensesnitt, og viktig for webutviklere å forstå forskjellene fra CSS, en kjerneferdighet som brukes konstant i React Native UI-utvikling.