Question

我有一个包含图像的View-Element，它作为View-Element的背景图像。背景图像是绝对定位的，顶部，左侧，右侧和底部设置为0，但它仍然高于它的父级（您可以在图像的红色边框上看到它）。

有谁知道为什么？

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

React Native：绝对定位图像高于父

1 个答案: