跳至主内容
版本:0.77

图片样式属性

非官方测试版翻译

本页面由 PageTurner AI 翻译(测试版)。未经项目官方认可。 发现错误? 报告问题 →

使用示例​

图片缩放模式​

图片边框​

图片圆角半径​

图片色调​

参考

属性​

backfaceVisibility​

该属性定义旋转图片时背面是否可见。

TypeDefault
enum('visible', 'hidden')'visible'

backgroundColor​

Type
color

borderBottomLeftRadius​

Type
number

borderBottomRightRadius​

Type
number

borderColor​

Type
color

borderRadius​

Type
number

borderTopLeftRadius​

Type
number

borderTopRightRadius​

Type
number

borderWidth​

Type
number

opacity​

设置图片的不透明度值,取值范围为 0.0 到 1.0。

TypeDefault
number1.0

overflow​

TypeDefault
enum('visible', 'hidden')'visible'

overlayColor
Android
​

当图片设置圆角时,指定 overlayColor 属性会用纯色填充圆角处的剩余空间。这在以下 Android 圆角实现不支持的场景中特别有用:

  • 某些缩放模式,例如 'contain'

  • 动画 GIF 图片

典型用法是将图片显示在纯色背景上,并将 overlayColor 设置为与背景相同的颜色。

关于底层实现原理,请参阅 Fresco 文档。

Type
string

resizeMode​

定义当图片框架与原始图片尺寸不匹配时的缩放方式,默认为 cover。

  • cover: 等比例缩放(保持宽高比),满足:

    • 图片的宽高都将大于或等于视图对应维度(减去内边距)
    • 至少有一个维度会等于视图对应维度(减去内边距)
  • contain: 等比例缩放(保持宽高比),图片的宽高都将小于或等于视图对应维度(减去内边距)

  • stretch: 独立缩放宽度和高度,可能改变原始图片宽高比

  • repeat: 重复图片以铺满视图区域。图片保持原始尺寸和宽高比,若大于视图则等比例缩小至能被视图包含

  • center: 在视图中双轴居中显示。若图片大于视图,则等比例缩小至能被视图包含

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

objectFit​

定义当图片框架与原始图片尺寸不匹配时的缩放方式。

TypeDefault
enum('cover', 'contain', 'fill', 'scale-down')'cover'

tintColor​

将所有非透明像素的颜色替换为 tintColor 所指定的颜色。

Type
color