Jak funguje stylování v React Native?

Question

Accepted Answer

React Native stylování používá **objekty JavaScriptu** (ne CSS soubory) — aplikované přes `style` prop, často organizované s `StyleSheet`. Používá **Flexbox-based** systém rozložení. Koncepty se podobají CSS, ale s syntaxí JavaScriptu a některými rozdíly. ## Stylování s objekty JavaScriptu ```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', }, }); ``` Styly jsou **objekty JavaScriptu** s **camelCase** názvy vlastností (`backgroundColor`, nikoli `background-color`); `StyleSheet.create` je organizuje. Můžete také předat inline objekty nebo pole stylů. ## Flexbox rozložení (výchozí) ```jsx // React Native uses FLEXBOX for layout (like CSS flexbox, but flexDirection defaults // to 'column', not 'row') ``` ## Rozdíly oproti webovému 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 ``` ## Proč je to důležité Rozvíjení znalostí o stylování v React Native je zásadní, protože **stylování je nezbytné pro vytváření jakéhokoli UI**, a přístup React Native se liší od webového CSS, takže je to nezbytná praktická znalost. React Native styluje UI pomocí **objektů JavaScriptu** (přes `style` prop, organizovaných s `StyleSheet`) spíše než CSS soubory — a pochopení tohoto (camelCase názvy vlastností jako `backgroundColor`, definování stylů jako objektů JS, kombinování stylů s poli) je nezbytné pro stylování jakékoli komponenty React Native. Rozvíjení znalostí o **Flexbox-based systému rozložení** je obzvláště důležité: React Native používá Flexbox pro rozložení (podobně jako CSS Flexbox, s flexDirection, justifyContent, alignItems), ale s klíčovým rozdílem, že **flexDirection má výchozí hodnotu 'column'** (ne 'row' jako na webu) — běžný zdroj zmatku. Flexbox je primárním mechanismem rozložení, takže jeho pochopení je nezbytné pro organizaci UI. Rozvíjení znalostí o **rozdílech oproti webovému CSS** je důležité zvláště pro webové vývojáře: objekty JS s camelCase místo CSS souborů/tříd, bezjednotkové číselné hodnoty, podmnožina CSS vlastností (ne všechno, co web má), column-default flexbox, a žádná kaskáda/dědičnost jako v CSS (styly jsou per-komponentu) — tyto rozdíly jsou běžné zdroje chyb, které pochopení objasňuje. Ačkoli se koncepty podobají CSS (což je to činí přístupným pro webové vývojáře), syntaxe a některé chování se liší, takže pochopení specifického přístupu React Native je nezbytné. Protože stylování je nezbytné pro vytváření jakéhokoli UI a přístup React Native s objekty JS, Flexbox-based (s jeho rozdíly oproti webovému CSS) je způsob, jak se to dělá, pochopení stylování v React Native je zásadní, základní praktická znalost — nezbytná pro vytváření jakéhokoli rozhraní React Native a důležitá pro webové vývojáře, aby pochopili rozdíly od CSS, základní dovednost používaná neustále při vývoji React Native UI.