跳至主内容

图片样式属性

非官方测试版翻译

本页面由 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.01.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