Cum funcționează styling-ul în React Native?

Question

Accepted Answer

React Native styling folosește **obiecte JavaScript** (nu fișiere CSS) — aplicate prin prop-ul `style`, adesea organizate cu `StyleSheet`. Folosește un **sistem de layout bazat pe Flexbox**. Conceptele seamănă cu CSS, dar cu sintaxă JavaScript și unele diferențe. ## Styling cu obiecte JavaScript ```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', }, }); ``` Stilurile sunt **obiecte JavaScript** cu nume de proprietăți în **camelCase** (`backgroundColor`, nu `background-color`); `StyleSheet.create` le organizează. Puteți transmite, de asemenea, obiecte inline sau matrice de stiluri. ## Layout Flexbox (implicitul) ```jsx // React Native uses FLEXBOX for layout (like CSS flexbox, but flexDirection defaults // to 'column', not 'row') ``` ## Diferențe față de CSS-ul web ```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 ``` ## De ce conteaza Înțelegerea styling-ului în React Native este fundamentală deoarece **styling-ul este esențial pentru construirea oricărei interfețe de utilizator**, iar abordarea React Native diferă de CSS-ul web, deci este cunoștințe practice necesare. React Native stilizează interfețele de utilizator cu **obiecte JavaScript** (prin prop-ul `style`, organizate cu `StyleSheet`) mai degrabă decât fișiere CSS — și înțelegerea acestui lucru (nume de proprietăți în camelCase ca `backgroundColor`, definind stiluri ca obiecte JS, combinând stiluri cu matrice) este necesară pentru stilizarea oricărui component React Native. Înțelegerea **sistemului de layout bazat pe Flexbox** este deosebit de importantă: React Native folosește Flexbox pentru layout (ca Flexbox CSS, cu flexDirection, justifyContent, alignItems), dar cu diferența cheie că **flexDirection implicit este 'column'** (nu 'row' ca pe web) — un punct frecvent de confuzie. Flexbox este mecanismul de layout principal, deci înțelegerea lui este esențială pentru aranjarea interfețelor de utilizator. Înțelegerea **diferențelor față de CSS-ul web** este importantă mai ales pentru dezvoltatorii web: obiecte JS cu camelCase în loc de fișiere/clase CSS, valori numerice fără unități, un subset de proprietăți CSS (nu totul ce are web), flexbox cu valoare implicită column, și fără cascadă/moștenire ca în CSS (stilurile sunt per-component) — aceste diferențe sunt obstacole frecvente pe care înțelegerea le clarifică. Desi conceptele seamănă cu CSS (ceea ce o face accesibilă pentru dezvoltatorii web), sintaxa și unele comportamente diferă, deci înțelegerea abordării specifice React Native este necesară. Deoarece styling-ul este esențial pentru construirea oricărei interfețe de utilizator și abordarea React Native bazată pe obiecte JS, Flexbox (cu diferențele sale față de CSS-ul web) este cum se face, înțelegerea styling-ului în React Native este esențială, cunoștințe practice fundamentale — necesare pentru construirea oricărei interfețe React Native, și importantă pentru dezvoltatorii web să înțeleagă diferențele față de CSS, o competență de bază folosită constant în dezvoltarea interfețelor React Native.