Jak działa stylowanie w React Native?

Question

Accepted Answer

React Native stylowanie używa **obiektów JavaScript** (nie plików CSS) — stosowanych poprzez prop `style`, często organizowanych za pomocą `StyleSheet`. Używa **systemu layoutu opartego na Flexbox**. Koncepcje są podobne do CSS, ale z składnią JavaScript i pewnymi różnicami. ## Stylowanie za pomocą obiektów 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', }, }); ``` Style to **obiekty JavaScript** z **camelCase** nazwami właściwości (`backgroundColor`, nie `background-color`); `StyleSheet.create` je organizuje. Możesz również przekazać obiekty inline lub tablice stylów. ## Layout Flexbox (domyślny) ```jsx // React Native uses FLEXBOX for layout (like CSS flexbox, but flexDirection defaults // to 'column', not 'row') ``` ## Różnice w stosunku do CSS dla sieci ```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 ``` ## Dlaczego to ważne Zrozumienie stylowania w React Native jest fundamentalne, ponieważ **stylowanie jest niezbędne do budowania dowolnego UI**, a podejście React Native różni się od CSS dla sieci, dlatego jest to obowiązkowa praktyczna wiedza. React Native styluje UI za pomocą **obiektów JavaScript** (poprzez prop `style`, organizowanych za pomocą `StyleSheet`) zamiast plików CSS — a zrozumienie tego (camelCase property names takie jak `backgroundColor`, definiowanie stylów jako obiekty JS, łączenie stylów za pomocą tablic) jest konieczne do stylowania dowolnego komponentu React Native. Zrozumienie **systemu layoutu opartego na Flexbox** jest szczególnie ważne: React Native używa Flexbox do layoutu (jak CSS Flexbox, z flexDirection, justifyContent, alignItems), ale z kluczową różnicą, że **flexDirection domyślnie ustawiona na 'column'** (nie 'row' jak w sieci) — to częsty punkt zamieszania. Flexbox jest głównym mechanizmem layoutu, dlatego zrozumienie go jest niezbędne do arranżowania UI. Zrozumienie **różnic w stosunku do CSS dla sieci** jest ważne szczególnie dla deweloperów webowych: obiekty JS z camelCase zamiast plików CSS/klas, wartości liczbowe bez jednostek, podzbiór właściwości CSS (nie wszystko, co ma sieć), column-default flexbox, i brak cascade/inheritance jak w CSS (style są per-komponent) — te różnice są częstymi przeszkodami, które zrozumienie wyjaśnia. Choć koncepcje są podobne do CSS (co czyni je dostępnymi dla deweloperów webowych), składnia i niektóre zachowania się różnią, dlatego zrozumienie specyficznego podejścia React Native jest konieczne. Ponieważ stylowanie jest niezbędne do budowania dowolnego UI i podejście React Native oparte na obiektach JS, Flexbox (z jego różnicami w stosunku do CSS dla sieci) jest tym, jak się to robi, zrozumienie stylowania w React Native jest niezbędne, fundamentalną praktyczną wiedzą — konieczne do budowania dowolnego interfejsu React Native i ważne dla deweloperów webowych, aby zrozumieć różnice od CSS, umiejętność podstawową używaną stale w tworzeniu UI React Native.