在React Native View中使用paddingVertical时，未计算视图的高度

Question

这是我的渲染方法

  render() {
    return (<View style={{
      display: "flex",
      backgroundColor: "green",
      paddingVertical: 20
    }}>
      <View style={{ backgroundColor: "red", flex: 1, position: "absolute", height: "100%", width: "100%" }} />
      <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>)
  }

输出如下：

我期待红色视图与父绿色视图完全重叠。如果Parent没有定义paddingVertical，则效果很好。有什么方法可以解决这个问题吗？

感谢。

Answer 1

在Red View component

将height: 100% and width: 100%更改为top: 0, bottom: 0, left: 0 and right: 0

return (
  <View
    style={{
      display: "flex",
      backgroundColor: "green",
      paddingVertical: 20
    }}
  >
    <View
      style={{
        backgroundColor: "red",
        flex: 1,
        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>
);