Kako deluje stilizacija v React Native?

Question

Accepted Answer

React Native stilizacija uporablja **JavaScript objekte** (ne CSS datotek) — uporabljenih prek `style` lastnosti, pogosto organiziranih s `StyleSheet`. Uporablja **Flexbox-temelječi** sistem postavitve. Koncepti so podobni CSS, vendar s JavaScript sintakso in nekaterimi razlikami. ## Stilizacija z JavaScript objekti ```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', }, }); ``` Stili so **JavaScript objekti** z **camelCase** imeni lastnosti (`backgroundColor`, ne `background-color`); `StyleSheet.create` jih organizira. Lahko tudi prenesite встав objekti ali nizi stilov. ## Flexbox postavitev (privzeta) ```jsx // React Native uses FLEXBOX for layout (like CSS flexbox, but flexDirection defaults // to 'column', not 'row') ``` ## Razlike od spletnega 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 ``` ## Zakaj je to pomembno Razumevanje stilizacije v React Native je temeljno, ker je **stilizacija bistvena za gradnjo katerega koli vmesnika**, in pristop React Native se razlikuje od spletnega CSS, zato je nujno praktično znanje. React Native stilizira uporabniške vmesnike s **JavaScript objekti** (prek `style` lastnosti, organiziranimi s `StyleSheet`) namesto CSS datotek — in razumevanje tega (camelCase imena lastnosti kot `backgroundColor`, definiranje stilov kot JS objekti, kombiniranje stilov s polji) je potrebno za stilizacijo katere koli React Native komponente. Razumevanje **Flexbox-temelječega sistema postavitve** je še posebej pomembno: React Native uporablja Flexbox za postavitev (kot CSS Flexbox, s `flexDirection`, `justifyContent`, `alignItems`), vendar s ključno razliko, da je **flexDirection privzeto 'column'** (ne 'row' kot na spletu) — pogosta točka zmede. Flexbox je primarni mehanizem postavitve, zato je razumevanje nanj bistveno za urejanje uporabniških vmesnikov. Razumevanje **razlik od spletnega CSS** je pomembno zlasti za spletne razvijalce: JS objekti s camelCase namesto CSS datotek/razredov, vrednosti brez enot, podmnožica CSS lastnosti (ne vse kot na spletu), privzeti column flexbox in brez kaskade/dedovanja kot CSS (stili so na komponento) — te razlike so pogoste ovire, ki jih razumevanje razjasnjuje. Čeprav so koncepti podobni CSS (kar ga naredi dostopnega za spletne razvijalce), se sintaksa in nekatera obnašanja razlikujejo, zato je razumevanje posebnega pristopa React Native potrebno. Ker je stilizacija bistvena za gradnjo katerega koli vmesnika in pristop React Native z JavaScript objekti, Flexbox-temelječi pristop (s svojimi razlikami od spletnega CSS) je način, kako se to naredi, je razumevanje stilizacije v React Native bistveno, temeljno praktično znanje — potrebno za gradnjo katerega koli vmesnika React Native in pomembno za spletne razvijalce, da razumejo razlike od CSS, osnovna veščina, ki se nenehno uporablja pri razvoju React Native vmesnikov.