登录
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行为较强，虽新版本有改善，但点击判定依然严格遵循父级区域。
-
注： 视觉上，Android 默认
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',
},
});
为什么？
- 性能： 系统可以将这些样式对象 ID 化并缓存，避免每次渲染组件时都重新创建新的对象。
-
验证： 它会在开发阶段检查你的属性名是否合法（比如如果你写了
background-color，它会直接报错提醒你改成backgroundColor）。
总结
当你开始在 React Native 中写样式时，请记住：
- ❌ 不要用 Kebab-case (
font-size)，要用 CamelCase (fontSize)。 - ❌ 不要加
px单位，直接写数字。 - ❌ 不要指望样式自动继承（Text 组件内的嵌套除外）。
- ⚠️ 默认布局是 纵向 (Column) 的。
- ⚠️ 所有的边框、阴影、圆角，在 iOS 和 Android 上可能表现不一致，多真机测试。
