React Native中高度小于1dp的View分隔线被截断丢失如何解决？

开发者阿泽

2026-10-6

问题原因

最核心的原因是亚像素渲染适配问题：React Native 在不同像素密度的设备上，对小于1dp的高度元素渲染逻辑不同。你设置的height: 0.5在部分1.5x/3x等特殊像素比例的设备上，转换为物理像素后不足1像素，会被系统判定为高度为0直接跳过渲染，而首个元素因为系统渲染优化逻辑，更容易触发这个问题。
次要可能原因：如果分隔线没有显式指定宽度，当父容器布局为非默认垂直布局时，分隔线宽度被计算为0无法显示；或者父容器设置了overflow: hidden，首个分隔线刚好被父容器的内边距裁剪。

解决办法

优先使用RN官方提供的适配值StyleSheet.hairlineWidth替代硬编码的0.5，这个值会自动适配当前设备的最小可渲染物理像素，完全规避亚像素渲染丢失问题：
```
divider: {
  height: StyleSheet.hairlineWidth,
  backgroundColor: Palette.BACKGROUND_DIVIDERS,
  marginBottom: 1,
}
```
如果需要保留自定义的细分隔线效果，可以用缩放替代直接设置小数高度，渲染优先级更高不会被丢弃：
```
divider: {
  height: 1,
  transform: [{scaleY: 0.5}],
  backgroundColor: Palette.BACKGROUND_DIVIDERS,
  marginBottom: 1,
}
```
额外兜底方案：给分隔线添加alignSelf: 'stretch'确保宽度撑满父容器，同时添加minHeight: StyleSheet.hairlineWidth避免高度被计算为0。
检查父容器样式，移除不必要的overflow: hidden配置，避免分隔线被意外裁剪。