Conas a oibríonn stíleáil i React Native?

Question

Accepted Answer

Úsáideann React Native stíleáil le **réada JavaScript** (ní le comhaid CSS) — a chuirtear i bhfeidhm tríd an tréith `style`, go minic eagraithe le `StyleSheet`. Úsáideann sé **córas leagan-amach bunaithe ar Flexbox**. Tá an coincheap cosúil le CSS ach le comhréir JavaScript agus go bhfuil roinnt difríochtaí ann. ## Stíleáil le réada 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', }, }); ``` Is **réada JavaScript** iad na stíleanna le hainmneacha maoine i **camelCase** (`backgroundColor`, ní `background-color`); eagraíonn `StyleSheet.create` iad. Fhéadfaidh tú freisin réada inlíne nó eagir stíleanna a thabhairt isteach. ## Leagan-amach Flexbox (an réamhshocrú) ```jsx // React Native uses FLEXBOX for layout (like CSS flexbox, but flexDirection defaults // to 'column', not 'row') ``` ## Difríochtaí ó CSS an gréasáin ```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 ``` ## Cén fáth a bhfuil sé tábhachtach Is bhunúsach an tuiscint ar stíleáil i React Native toisc go **bhíonn stíleáil riachtanach chun aon UI a thógáil**, agus tá cur chuige React Native difriúil ó CSS an gréasáin, agus mar sin is riachtanach é an t-eolas praiticiúil seo. Déanann React Native UIs a stíleáil le **réada JavaScript** (tríd an tréith `style`, eagraithe le `StyleSheet`) seachas comhaid CSS — agus is gá duit a thuiscint (ainmneacha maoine camelCase cosúil le `backgroundColor`, stíleanna a shainiú mar oibiachtaí JS, stíleanna a chomhcheangal le eagir) chun comhpháirt ar bith React Native a stíleáil. Tá an tuiscint ar an **córas leagan-amach bunaithe ar Flexbox** go háirithe tábhachtach: úsáideann React Native Flexbox do leagan-amach (cosúil le Flexbox CSS, le flexDirection, justifyContent, alignItems), ach leis an difríocht lárnach go **réamhshocraithe flexDirection go 'column'** (ní 'row' ar an ngréasáin) — pointe mearbhaill choitianta. Is é Flexbox an méanacism leagan-amach príomhúil, agus mar sin is riachtanach an tuiscint air chun UIs a leagan amach. Tá an tuiscint ar an **difríochtaí ó CSS an gréasáin** tábhachtach go háirithe do fhorbróirí an gréasáin: réada JS le camelCase in ionad comhaid/ranganna CSS, luachanna uimhriúla gan aonaid, fo-thacar airíonna CSS (ní gach rud atá ar an ngréasáin), an column-default flexbox, agus gan cascade/oidhreacht cosúil le CSS (stíleanna in aghaidh an chomhpháirt) — is iad na difríochtaí seo na cnámha spréacharnach choitianta a soiléiríonn an tuiscint. Cé go bhfuil an coincheap cosúil le CSS (ag déanamh sé inrochtana do fhorbróirí an gréasáin), tá an comhréir agus roinnt iompraíochtaí difriúil, agus mar sin is gá duit cur chuige sonrach React Native a thuiscint. OS rud é go bhfuil stíleáil riachtanach chun aon UI a thógáil agus gur é an cur chuige JS-réada, Flexbox-bunaithe React Native (lena difríochtaí ó CSS an gréasáin) an chaoi ar dhéantar é, is riachtanach an tuiscint ar stíleáil i React Native, eolas praiticiúil bhunúsach — riachtanach chun aon chomhéadan React Native a thógáil, agus tábhachtach do fhorbróirí an gréasáin na difríochtaí ó CSS a thuiscint, scil bhunúsach a úsáidtear go leanúnach i bhforbairt UI React Native.