Kaip veikia stilizavimas React Native?

Question

IT Interview Practice · Accepted Answer

React Native stilizavimas naudoja **JavaScript objektus** (ne CSS failus) — taikomi per `style` rekvizitą, dažnai organizuojami su `StyleSheet`. Jis naudoja **Flexbox pagrįstą** išdėstymo sistemą. Koncepcijos panašios į CSS, bet su JavaScript sintakse ir kai kuriais skirtumais. ## Stilizavimas su JavaScript objektais ```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', }, }); ``` Stiliai yra **JavaScript objektai** su **camelCase** savybių pavadinimais (`backgroundColor`, o ne `background-color`); `StyleSheet.create` juos organizuoja. Taip pat galite perduoti išorinės linijos objektus arba stilių masyvus. ## Flexbox išdėstymas (numatytasis) ```jsx // React Native uses FLEXBOX for layout (like CSS flexbox, but flexDirection defaults // to 'column', not 'row') ``` ## Skirtumai nuo žiniatinklio 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 ``` ## Kodėl tai svarbu Supratimas apie stilizavimą React Native yra pagrindinė koncepcija, nes **stilizavimas yra esminis kuriant bet kokią UI**, ir React Native požiūris skiriasi nuo žiniatinklio CSS, todėl tai būtina praktinė žinoma. React Native stilizuoja UI su **JavaScript objektais** (per `style` rekvizitą, organizuotus su `StyleSheet`) vietoj CSS failų — ir norint suprasti tai (camelCase savybių pavadinimus kaip `backgroundColor`, stilių apibrėžimą kaip JS objektus, stilių sujungimą naudojant masyvus) yra būtina bet kuriam React Native komponentui stilizuoti. Supratimas apie **Flexbox pagrįstą išdėstymo sistemą** yra ypač svarbus: React Native naudoja Flexbox išdėstymui (panašiai kaip CSS Flexbox, su flexDirection, justifyContent, alignItems), bet su esminiu skirtumu, kad **flexDirection numatytas yra 'column'** (o ne 'row', kaip žiniatinklyje) — tai dažnas painiavos šaltinis. Flexbox yra pirminis išdėstymo mechanizmas, todėl jo supratimas yra būtinas UI sujungimui. Supratimas apie **skirtumus nuo žiniatinklio CSS** yra svarbus ypač žiniatinklio kūrėjams: JS objektai su camelCase vietoj CSS failų/klasių, be vienetų skaitinės reikšmės, CSS savybių poaibis (ne viskas, kas yra žiniatinklyje), stulpelio numatytas flexbox ir jokios kaskados/paveldimumo kaip CSS (stiliai yra komponentui būdingi) — šie skirtumai yra dažnos kliūtys, kurias supratimas išaiškina. Nors koncepcijos panašios į CSS (todėl lengva suprasti žiniatinklio kūrėjams), sintaksė ir kai kurie elgesiai skiriasi, todėl būtina suprasti React Native specifinį požiūrį. Kadangi stilizavimas yra esminis kuriant bet kokią UI ir React Native JS objektų, Flexbox pagrįstą požiūrį (su jo skirtumais nuo žiniatinklio CSS) — tai, kaip tai daroma, supratimas apie stilizavimą React Native yra esminis, pagrindinė praktinė žinoma — būtina kuriant bet kokį React Native sąsają, ir svarbu žiniatinklio kūrėjams suprasti skirtumus nuo CSS, pagrindinė įgūdis, nuolat naudojamas React Native UI kūrime.

Stilizavimas su JavaScript objektais

Flexbox išdėstymas (numatytasis)

Skirtumai nuo žiniatinklio CSS

Kodėl tai svarbu

Susiję klausimai