Kako funkcionira stilizacija u React Nativeu?

Question

Accepted Answer

React Native stilizacija koristi **JavaScript objekte** (ne CSS datoteke) — primjenjuje se putem `style` svojstva, često organizirane sa `StyleSheet`. Koristi **Flexbox-baziran** sustav za raspored. Koncepti nalikuju CSS-u ali sa JavaScript sintaksom i nekim razlikama. ## Stilizacija sa JavaScript objektima ```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', }, }); ``` Stilovi su **JavaScript objekti** sa **camelCase** nazivima svojstava (`backgroundColor`, ne `background-color`); `StyleSheet.create` ih organizira. Možete proslijediti i inline objekte ili niz stilova. ## Flexbox raspored (zadana vrijednost) ```jsx // React Native uses FLEXBOX for layout (like CSS flexbox, but flexDirection defaults // to 'column', not 'row') ``` ## Razlike od web CSS-a ```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 ``` ## Zašto je to važno Razumijevanje stilizacije u React Nativeu je temeljno jer je **stilizacija esencijalna za izgradnju bilo kojeg korisničkog sučelja**, a pristup React Nativea razlikuje se od web CSS-a, stoga je to neophodna praktična znanja. React Native stilizira korisnika sučelja sa **JavaScript objektima** (putem `style` svojstva, organiziranim sa `StyleSheet`) umjesto CSS datoteka — i razumijevanje toga (camelCase nazive svojstava kao `backgroundColor`, definiranje stilova kao JS objekte, kombiniranje stilova sa nizovima) je potrebno za stiliziranje bilo koje React Native komponente. Razumijevanje **Flexbox-baziranog sustava za raspored** je posebno važno: React Native koristi Flexbox za raspored (kao CSS Flexbox, sa flexDirection, justifyContent, alignItems), ali sa ključnom razlikom da **flexDirection zadano ima vrijednost 'column'** (ne 'row' kao na webu) — česta točka zabune. Flexbox je primarni mehanizam za raspored, stoga je razumijevanje njega esencijalno za uređenje korisničkog sučelja. Razumijevanje **razlika od web CSS-a** je važno posebno za web razvojne inženjere: JS objekti sa camelCase umjesto CSS datoteka/klasa, brojčane vrijednosti bez jedinica, podskup CSS svojstava (ne sve što web ima), column-zadana flexbox, i bez kaskade/nasljeđivanja kao CSS (stilovi su po komponenti) — ove razlike su česti problemi stopala koji razumijevanjem postaju jasni. Mada koncepti nalikuju CSS-u (čineći ga pristupačnim za web razvojne inženjere), sintaksa i neka ponašanja se razlikuju, stoga je razumijevanje specifičnog pristupa React Nativea neophodno. Budući da je stilizacija esencijalna za izgradnju bilo kojeg korisničkog sučelja i React Native JS-objektni, Flexbox-baziran pristup (sa svojim razlikama od web CSS-a) je način na koji se to radi, razumijevanje stilizacije u React Nativeu je esencijalno, temeljno praktično znanja — potrebno za izgradnju bilo kojeg React Native sučelja, i važno za web razvojne inženjere da razumiju razlike od CSS-a, temeljna vještina koja se stalno koristi u React Native UI razvoju.