React Native：親よりも高い絶対位置の画像

Question

View-Elementの背景画像として機能する画像を含むView-Elementがあります。背景画像は、上、左、右、下を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 
    },