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', }, }); ``` 样式是具有 **camelCase** 属性名称的 **JavaScript 对象**（`backgroundColor` 而不是 `background-color`）；`StyleSheet.create` 用于组织它们。你也可以传递内联对象或样式数组。 ## Flexbox 布局（默认布局） ```jsx // React Native uses FLEXBOX for layout (like CSS flexbox, but flexDirection defaults // to 'column', not 'row') ``` ## 与 Web 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 的方法与 Web CSS 不同，所以这是必须掌握的实用知识。 React Native 使用 **JavaScript 对象**（通过 `style` 属性，使用 `StyleSheet` 组织）而不是 CSS 文件来为 UI 设置样式 — 理解这一点（camelCase 属性名称如 `backgroundColor`、将样式定义为 JS 对象、使用数组组合样式）对设置任何 React Native 组件的样式是必要的。理解基于 **Flexbox 的布局系统** 尤其重要：React Native 使用 Flexbox 进行布局（如 CSS Flexbox，具有 flexDirection、justifyContent、alignItems），但关键区别是 **flexDirection 默认为 'column'**（Web 上默认为 'row'）— 这是一个常见的混淆点。 Flexbox 是主要的布局机制，因此理解它对排列 UI 至关重要。理解 **与 Web CSS 的区别** 尤其对 Web 开发人员很重要：带有 camelCase 的 JS 对象而不是 CSS 文件/类、无单位的数值、CSS 属性的子集（不是 Web 有的所有东西）、column 默认 flexbox、以及没有像 CSS 那样的级联/继承（样式是每组件的）— 这些差异是常见的绊脚石，理解它们可以澄清问题。虽然这些概念类似于 CSS（对 Web 开发人员来说很容易接触），但语法和一些行为有所不同，因此理解 React Native 的特定方法是必要的。由于样式对构建任何 UI 至关重要，而 React Native 的 JS 对象、基于 Flexbox 的方法（及其与 Web CSS 的差异）就是实现方式，理解 React Native 中的样式是基础的、实用的知识 — 构建任何 React Native 界面都需要这些知识，对于 Web 开发人员来说理解与 CSS 的差异很重要，这是 React Native UI 开发中不断使用的核心技能。