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：图片不拉伸不缩放且居中