反应天然:绝对位置图像高于父

Question

i具有一个包含图像的视图，该图像可作为视图元素的背景图像。背景图像是绝对位于顶部，左，右和底部设置为0的位置的，但它仍然比它的父（您可以在图像中的红色边框上看到）。

iOS模拟器的屏幕截图

有人知道为什么吗？

<View style={styles.headerContainer}>
  <Image source={Images.headerBg} style={styles.headerBackgroundImage} resizeMode="cover" />
  <View style={styles.headerRow}>
    <View style={styles.headerColumn}>
      <TouchableOpacity style={styles.magicHeartButton}>
        <Icon
          name="heart"
          size={12}
          color="red"
          style={styles.magicHeartButtonIcon}
        />
        <Text style={styles.magicHeartButtonText}>247</Text>
      </TouchableOpacity>
    </View>
    <View style={styles.headerColumn}>
      <TouchableOpacity style={styles.tonightButton}>
        <Text style={styles.tonightButtonText}>right column</Text>
      </TouchableOpacity>
    </View>
  </View>
</View>

样式表：

headerContainer: {
  backgroundColor: '#ffd700',
  height: 40,
  position: 'relative',
  borderWidth: 1,
  borderColor: 'red',
},
headerRow: {
  justifyContent: 'space-between',
  flexDirection: 'row',
  alignItems: 'center',
},
headerColumn: {
  padding: 10,
},
headerBackgroundImage: {
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
},

Answer 1

我按照以下方式进行了背景图像。我没有包装<View>，而是包裹了<Image>

中的所有内容

示例：

<Image source = {require('./back.jpg')} style={styles.container}>
  <View>
  </View>
</Image>


container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0)',
    height :null,
    width: null
  },