react native 圖片顯示不完全的問題

原圖是這樣的，我們要拿這個做背景圖，鋪滿整個手機屏幕 

 

 

在做背景圖片的時候這樣寫:

let {width,height} = Dimensions.get('window');

設置背景圖的現實范圍寬高和屏幕相等:

<Image source = {uri:img}

    style = {width:width,height:height}/>

 

顯示如圖：

 

發現杯子的底座和火焰都被截掉了。

這里默認了resizeMode ='cover'：

  圖片按照寬高比例中較短的一方顯示，長的一方將被截取兩頭

Image的resizeMode屬性 ：

resizeMode enum('cover', 'contain', 'stretch', 'repeat', 'center') 

 

如果我們需要將原圖完全顯示出來可以設置

resizeMode ='contain' ：

圖片將按比例縮放按寬和高較長的顯示，短的方向兩邊留出空白

 

resizeMode ='stretch' ：

圖片將完全顯示出來並拉伸變形鋪滿整個屏幕

 repeat：圖片將重復並鋪滿屏幕（只支持ios）

center：圖片不拉伸不縮放且居中