React Native: Абсолютное позиционированное изображение выше, чем у родителя

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