RN 样式特点：Flex 布局默认、没有像素单位、样式不能级联

React Native（RN）的样式系统与 Web CSS 有不少区别，你提到的三点都是 RN 的核心特点：

1. Flex 布局默认（Default Flexbox）

RN 默认采用 Flexbox 进行布局，不需要写 display: flex。

<View style={{
  flex: 1,
  flexDirection: 'column',
}}>
  <View style={{ flex: 1 }} />
  <View style={{ flex: 2 }} />
</View>

特点：

• 默认就是 display: flex

• 默认主轴方向是 column（纵向） ，而 Web CSS 默认是 row

• 常用属性：

  • flex
  • flexDirection
  • justifyContent
  • alignItems
  • alignSelf
  • flexWrap

例如：

<View style={{
  flexDirection: 'row',
  justifyContent: 'space-between',
  alignItems: 'center',
}}>

---

2. 没有像素单位（No px）

RN 中所有尺寸都不写单位。

例如：

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 50,
    marginTop: 20,
    fontSize: 16,
  },
});

而不是：

width: 100px;

原因：

RN 使用的是逻辑像素（Density-independent Pixels，dp） ，框架会根据不同设备的屏幕密度自动进行适配，因此无需写 px。

例如：

padding: 10
margin: 15
borderRadius: 8

都是合法写法。

---

3. 样式不能级联（No Cascading）

RN 没有 CSS 的层叠（Cascade）和继承机制。

例如 Web：

<div class="parent">
    <p>Hello</p>
</div>

.parent {
    color: red;
}

子元素 <p> 会继承颜色。

但是 RN：

<View style={{ backgroundColor: 'red' }}>
    <Text>Hello</Text>
</View>

Text 不会自动继承大多数样式（只有少数文本相关属性在嵌套 Text 中会继承）。

必须显式写：

<Text style={{ color: 'red' }}>
    Hello
</Text>

也没有：

• .box .title
• #id
• div p
• :hover
• :before
• @media

这些 CSS 选择器和规则。

RN 的样式是直接绑定到组件上的：

<Text style={styles.title}>

---

样式组合方式

RN 推荐使用数组组合样式：

<Text style={[styles.title, styles.active]}>
    Hello
</Text>

后面的样式会覆盖前面的同名属性，相当于：

{
  ...styles.title,
  ...styles.active
}

---

总结

特点	React Native	Web CSS
默认布局	Flexbox（display: flex 默认开启）	Block 布局，需要写 display: flex
默认主轴	column	row
单位	不写单位（逻辑像素）	px、em、rem、% 等
样式级联	不支持	支持
CSS 选择器	不支持	支持
样式复用	StyleSheet.create()、数组合并	class、继承、层叠、选择器

这三点可以概括为：RN 默认使用 Flexbox（纵向布局），样式值使用无单位的逻辑像素，样式仅作用于当前组件，不支持 CSS 的层叠和复杂选择器。