React Native中使用paddingVertical时View高度计算异常问题

嘿，我来帮你捋清楚这个问题的根源和解决办法：

问题原因分析 #

1. 绝对定位视图未完全覆盖父视图
   在React Native里，当你给绝对定位的子视图设置width: "100%"和height: "100%"时，这个百分比是基于父视图的内容区域计算的，并不包含父视图的padding。所以你的红色View只会覆盖绿色View的内容部分，上下padding的区域自然就没被覆盖到。

2. paddingVertical导致高度计算异常
   父视图的paddingVertical会增加自身的总高度（内容高度+上下padding），但绝对定位的元素不参与正常布局流，父视图的高度其实是由内部的四个Text元素撑开的。而红色View的height: "100%"只对应父视图的内容高度，所以看起来高度就“异常”了。

解决方案 #

最直接有效的办法是用边缘定位代替宽高百分比，修改绝对定位子视图的样式：

render() { 
  return (
    <View style={{ backgroundColor: "green", paddingVertical: 20 }}> 
      {/* 用top/bottom/left/right: 0代替width/height: 100% */}
      <View style={{ backgroundColor: "red", position: "absolute", top: 0, bottom: 0, left: 0, right: 0 }} /> 
      <Text>This is the text</Text> 
      <Text>This is the text</Text> 
      <Text>This is the text</Text> 
      <Text>This is the text</Text> 
    </View>
  ) 
}

这样设置后，红色View会完全贴合父视图的四个边缘，不管父视图有没有padding，都能实现完全覆盖的效果。另外提一句，React Native的View默认就是flex布局，所以display: "flex"可以省略掉哦。

如果你的场景更复杂，也可以考虑把父视图的padding转移到内部非绝对定位的元素上（比如给所有Text套一个带padding的View），让父视图没有padding，这样绝对定位子视图的宽高100%就能覆盖整个父视图了。

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