javascript - react native : Absolute positioned image higher than parent

Question

我有一个包含图像的 View 元素，该图像用作 View 元素的背景图像。背景图像是绝对定位的，顶部、左侧、右侧和底部设置为 0，但它仍然高于其父级(您可以在图像中的红色边框上看到它)。

Screenshot from iOS Simulator

有谁知道为什么吗？

<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
  },