Hoe werkt styling in React Native?

Question

Accepted Answer

React Native styling gebruikt **JavaScript objects** (geen CSS-bestanden) — toegepast via de `style` prop, vaak georganiseerd met `StyleSheet`. Het gebruikt een **Flexbox-gebaseerd** layout systeem. De concepten lijken op CSS maar met JavaScript-syntaxis en enkele verschillen. ## Styling met JavaScript objects ```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', }, }); ``` Styles zijn **JavaScript objects** met **camelCase** properties (`backgroundColor`, niet `background-color`); `StyleSheet.create` organiseert ze. Je kunt ook inline objects of arrays van styles doorgeven. ## Flexbox layout (de standaard) ```jsx // React Native uses FLEXBOX for layout (like CSS flexbox, but flexDirection defaults // to 'column', not 'row') ``` ## Verschillen met 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 ``` ## Waarom het belangrijk is Inzicht in styling in React Native is fundamenteel omdat **styling essentieel is voor het bouwen van elke UI**, en React Native's aanpak verschilt van web CSS, dus het is essentiële praktische kennis. React Native stijlen UIs met **JavaScript objects** (via de `style` prop, georganiseerd met `StyleSheet`) in plaats van CSS-bestanden — en inzicht hierin (camelCase properties zoals `backgroundColor`, styles definiëren als JS objects, styles combineren met arrays) is noodzakelijk voor het stijlen van elk React Native component. Inzicht in het **Flexbox-gebaseerde layout systeem** is bijzonder belangrijk: React Native gebruikt Flexbox voor layout (zoals CSS Flexbox, met flexDirection, justifyContent, alignItems), maar met het belangrijk verschil dat **flexDirection standaard 'column'** is (niet 'row' zoals op het web) — een veel voorkomend verwarrend punt. Flexbox is het primaire layout mechanisme, dus inzicht hierin is essentieel voor het arrangeren van UIs. Inzicht in de **verschillen met web CSS** is belangrijk, vooral voor web developers: JS objects met camelCase in plaats van CSS bestanden/classes, eenheidloze numerieke waarden, een subset van CSS properties (niet alles wat het web heeft), de column-standaard flexbox, en geen cascade/inheritance zoals CSS (styles zijn per-component) — deze verschillen zijn veel voorkomende struikelblokken die inzicht verduidelijkt. Alhoewel de concepten op CSS lijken (wat het toegankelijk maakt voor web developers), verschilt de syntaxis en enig gedrag, dus inzicht in React Native's specifieke aanpak is noodzakelijk. Omdat styling essentieel is voor het bouwen van elke UI en React Native's JS-object, Flexbox-gebaseerde aanpak (met zijn verschillen van web CSS) is hoe het gedaan wordt, is inzicht in styling in React Native essentieel, fundamentele praktische kennis — noodzakelijk voor het bouwen van elke React Native interface, en belangrijk voor web developers om de verschillen van CSS te begrijpen, een kernvaardigheid die constant gebruikt wordt in React Native UI-ontwikkeling.