Как работает стилизация в React Native?

Question

Accepted Answer

Стилизация в React Native использует **объекты JavaScript** (а не CSS-файлы) — применяются через проп `style`, часто организованы с `StyleSheet`. Использует **Flexbox-основанную** систему разметки. Концепции напоминают CSS, но с синтаксисом JavaScript и некоторыми отличиями. ## Стилизация с объектами 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', }, }); ``` Стили — это **объекты JavaScript** со свойствами в **camelCase** (`backgroundColor`, а не `background-color`); `StyleSheet.create` организует их. Вы также можете передавать встроенные объекты или массивы стилей. ## Flexbox-разметка (по умолчанию) ```jsx // React Native uses FLEXBOX for layout (like CSS flexbox, but flexDirection defaults // to 'column', not 'row') ``` ## Отличия от веб-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 ``` ## Почему это важно Понимание стилизации в React Native является фундаментальным, поскольку **стилизация необходима для создания любого UI**, и подход React Native отличается от веб-CSS, поэтому это обязательные практические знания. React Native стилизирует UI с помощью **объектов JavaScript** (через проп `style`, организованных с `StyleSheet`), а не CSS-файлов — и понимание этого (свойства в camelCase, такие как `backgroundColor`, определение стилей как объектов JS, объединение стилей с массивами) необходимо для стилизации любого компонента React Native. Понимание **Flexbox-основанной системы разметки** особенно важно: React Native использует Flexbox для разметки (как веб-CSS Flexbox, с flexDirection, justifyContent, alignItems), но с ключевым отличием, что **flexDirection по умолчанию имеет значение 'column'** (а не 'row', как в веб) — распространённая точка путаницы. Flexbox — это основной механизм разметки, поэтому его понимание необходимо для организации UI. Понимание **отличий от веб-CSS** важно особенно для веб-разработчиков: объекты JS с camelCase вместо CSS-файлов/классов, безразмерные числовые значения, подмножество CSS-свойств (не всё, что есть в веб), column-default flexbox, и нет каскада/наследования, как в CSS (стили применяются для каждого компонента) — эти отличия — распространённые камни преткновения, которые понимание проясняет. Хотя концепции напоминают CSS (что делает их доступными для веб-разработчиков), синтаксис и некоторое поведение отличаются, поэтому понимание специфического подхода React Native необходимо. Поскольку стилизация необходима для создания любого UI и подход React Native, основанный на JS-объектах, Flexbox (с его отличиями от веб-CSS) — это то, как это работает, понимание стилизации в React Native — это необходимое, фундаментальное практическое знание — необходимое для создания любого интерфейса React Native и важное для веб-разработчиков, чтобы понять отличия от CSS, основной навык, постоянно используемый при разработке React Native UI.