React Native 样式系统详解：与 Web CSS 的“似是而非”

很多从 Web 转战 React Native 的开发者最先问的问题通常是："我能直接把 CSS 文件复制进去吗？"

答案是不能 。虽然 React Native 的样式系统在命名和行为上极力模仿 CSS，但它本质上是JavaScript 对象，运行机制也完全不同。以下是关于这两者差异的完整技术总结。

1. 核心语法：从 Kebab-case 到 CamelCase

在 Web 中，CSS 是文本；在 RN 中，样式是代码（对象）。由于 JavaScript 对象的属性名不能包含连字符（-），所有 CSS 属性都必须转换为 小驼峰命名法 (camelCase) 。

特性	Web CSS	React Native Style
背景色	background-color: red;	backgroundColor: 'red'
字体大小	font-size: 16px;	fontSize: 16 (注意是数字)
外边距	margin-top: 20px;	marginTop: 20
复合属性	border: 1px solid red;	不支持 。必须拆分为 borderWidth, borderColor, borderStyle

为什么这样做？

因为样式是 JS 对象，这意味着你可以利用编程语言的所有能力：变量、条件判断、函数计算等。

// React Native 允许动态计算样式
<View style={{
  backgroundColor: isActive ? 'blue' : 'gray', // 条件样式
  width: windowWidth * 0.5 // 动态计算
}} />

2. 继承与层叠：数组覆盖法

Web CSS 的全称是"层叠样式表"（Cascading Style Sheets），依赖选择器权重（Specificity）来决定谁生效。

React Native 没有选择器（没有 .class 或 #id），也没有隐式的样式继承（子元素不会自动继承父元素的字体颜色）。

RN 的"层叠"通过数组实现：

RN 允许你给 style 属性传递一个数组。数组中越靠后的样式优先级越高。

const styles = {
  base: { fontSize: 14, color: 'black' },
  active: { color: 'blue' } // 激活状态覆盖颜色
};

// 数组最后一个生效，最终颜色为 blue
<Text style={[styles.base, styles.active]}>Hello</Text>

这种方式让样式覆盖变得显式且可预测，彻底消除了 Web 开发中"不知道这个样式是从哪里继承来的"痛苦。

3. 布局系统：Flexbox 是唯一真理

React Native 移除了 Web 中复杂的 float, display: block/inline, grid 等布局方式，只保留并强制使用 Flexbox。

但有一个巨大的陷阱需要注意：默认主轴方向不同。

• Web Flexbox: 默认 flex-direction: row (横向排列)。

• RN Flexbox: 默认 flexDirection: 'column' (纵向排列)。

  • 原因： 手机屏幕是窄长的，垂直滚动是移动端的默认交互模式。

4. 尺寸与单位：没有 px，只有逻辑点

在 Web 上，我们纠结于 px, em, rem, vw, vh。

在 RN 上，几乎所有尺寸属性（width, height, margin, padding, fontSize）都只接受不带单位的数字。

• 含义： 这些数字代表 逻辑像素 (Logical Pixels / Points) 。

• 自动适配： RN 会根据设备的屏幕密度（DPI/PixelRatio）自动将其转换为屏幕上的物理像素。

  • 写 width: 100，在普通屏是 100px，在 Retina 屏可能是 200px 或 300px。
  • 例外： 也可以使用百分比字符串，如 width: '50%'。

5. 常见痛点与已知限制 (Known Issues)

根据你提供的文档片段，RN 并不是完美复刻了 CSS 引擎，这里有几个著名的"坑"：

A. 触摸区域与父级边界 (Parent Bounds)

• Web: 子元素设为 absolute 并移出父元素框外，通常依然可见且可点击。

• RN (Android): 子元素的触摸事件 无法超出父组件的边界。如果你把按钮用 position: absolute 移到了父 View 的外面，你看着它在那里，但点它没反应。

  • 注： 视觉上，Android 默认 overflow: hidden 行为较强，虽新版本有改善，但点击判定依然严格遵循父级区域。

B. 负边距 (Negative Margins)

• Web: margin-top: -50px 是常用的重叠布局技巧。
• RN: 文档明确提到 "on Android negative margin is not supported" （或支持受限）。虽然现代 RN 版本对负 margin 的支持已经好转，但在某些复杂嵌套或旧版本 Android 上，它依然会导致布局塌陷或裁剪。

C. 圆角与图片 (Border Radius)

如前文所述，iOS 的 <Image> 组件对 borderTopLeftRadius 等单独 圆角属性支持不佳。必须通过包裹一个 <View> 并设置 overflow: 'hidden' 来实现异形图片。

D. 阴影 (Shadows)

这是最分裂的地方：

• iOS: 使用 shadowColor, shadowOffset, shadowOpacity (类似 CSS)。
• Android: 必须使用 elevation (一个数字，对应 Material Design 的层级高度)。为了跨平台，通常需要根据平台写两套代码。

6. 最佳实践：StyleSheet.create

虽然你可以直接写内联样式对象 style={{color: 'red'}}，但官方推荐使用 StyleSheet.create。

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

为什么？

1. 性能： 系统可以将这些样式对象 ID 化并缓存，避免每次渲染组件时都重新创建新的对象。
2. 验证： 它会在开发阶段检查你的属性名是否合法（比如如果你写了 background-color，它会直接报错提醒你改成 backgroundColor）。

---

总结

当你开始在 React Native 中写样式时，请记住：

1. ❌ 不要用 Kebab-case (font-size)，要用 CamelCase (fontSize)。
2. ❌ 不要加 px 单位，直接写数字。
3. ❌ 不要指望样式自动继承（Text 组件内的嵌套除外）。
4. ⚠️ 默认布局是 纵向 (Column) 的。
5. ⚠️ 所有的边框、阴影、圆角，在 iOS 和 Android 上可能表现不一致，多真机测试。