設置背景圖片的位置（即`背景位置x`和`背景位置y`在網頁）

Question

當我有一個背景圖片：

<Image style={{flex: 1, width: null, height: null, resizeMode: 'cover'}} source={require('../images/background.png')}> 
    <!-- Children --> 
</Image> 

我期待我的形象，以覆蓋整個同時保持圖像的寬高比。 （爲什麼我使用width: null, height: null見本SO question。）

然而，如果圖像寬度遠小於高度，該圖像是居中其中作物的頂部。

問題：如何讓圖像從頂部開始，而不是像網頁上的background-position: 50% 0一樣？

Answer 1

嘿:)儘量增加你的父容器即：

風格的高度：

export default StyleSheet.create({ 
    image: { 
    flex: 1, 
    height: null, 
    width: null, 
    }, 
    imageContainer: { 
    bottom: 0, 
    flex: 1, 
    height: '130%', 
    left: 0, 
    position: 'absolute', 
    right: 0, 
    top: 0, 
    width: '100%', 
    }, 
}) 

組件：

<View style={styles.imageContainer}> 
     <Image 
      resizeMode="cover" 
      source={require('src/assets/images/background.jpg')} 
      style={styles.image} 
     /> 
     </View> 

使用該解決方案可以稍微機動你的形象。