ReactNative 图片处理 属性 resizeMode 说明

使用Image组件时,如果默认不对resizeMode进行设置,那么
图片会按照宽高比例中较小的一方显示,长的一方将被裁切掉两端
在这里插入图片描述

Image的resizeMode属性:

resizeMode enum(‘cover’,‘contain’,‘stretch’,‘repeat’,‘center’)

如果我们需要将原图完全显示出来可以设置

resizeMode =’contain’:

图片将按比例缩放按宽和高较长的显示,短的方向两边留出空白
ReactNative 图片处理 属性 resizeMode 说明_第1张图片

resizeMode =’stretch’:

图片将完全显示出来并拉伸变形铺满整个屏幕
ReactNative 图片处理 属性 resizeMode 说明_第2张图片
但如果你的尺寸比例不合适,可能会出现下列尴尬画面
ReactNative 图片处理 属性 resizeMode 说明_第3张图片

repeat:图片重复并铺满屏幕(不支持android)

center:图片不拉伸不缩放且居中

最后提醒一下大家,ImageBackground组件中的resizeMode是无效的

你可能感兴趣的:(react,native)