React-Native元素检查时绿色padding与蓝色content间白色区域如何移除

该白色区域的属性 #

React Native调试面板的盒模型默认配色规则为：蓝色是内容区（content）、绿色是内边距（padding）、橙色是外边距（margin）。你提到的介于两者之间的白色区域分两种情况：

1. 若区域在padding外侧：属于边框（border）区域，未设置边框颜色时调试面板会默认显示为白色
2. 若区域在content和padding之间、属于内容区内部：是Text类文本组件的内置字体上下边距，属于React Native文本渲染的默认留白

移除方案 #

边框区域场景 #

直接在目标元素的样式中显式设置borderWidth: 0即可，代码示例：

<View style={{
  // 其他原有样式
  borderWidth: 0
}}>
  元素内容
</View>

如果仅需要移除单方向的边框，单独设置对应属性即可，比如移除下边框设置borderBottomWidth: 0。

Text组件内置留白场景 #

给Text组件添加includeFontPadding: false属性，同时将lineHeight设置为和fontSize一致即可消除：

<Text style={{
  fontSize: 16,
  lineHeight: 16,
  includeFontPadding: false
}}>
  测试文本
</Text>

内容的提问来源于stack exchange，提问作者Hafez Kaghazi