图像样式属性
示例
图像缩放模式
图像边框
图像边框半径
图像着色
参考
属性
backfaceVisibility
此属性定义是否应显示旋转图像的背面。
类型 | 默认值 |
---|---|
enum('visible' , 'hidden' ) | 'visible' |
backgroundColor
类型 |
---|
color |
borderBottomLeftRadius
类型 |
---|
number |
borderBottomRightRadius
类型 |
---|
number |
borderColor
类型 |
---|
color |
borderRadius
类型 |
---|
number |
borderTopLeftRadius
类型 |
---|
number |
borderTopRightRadius
类型 |
---|
number |
borderWidth
类型 |
---|
number |
opacity
设置图像的不透明度值。该数字应在 0.0
到 1.0
的范围内。
类型 | 默认值 |
---|---|
number | 1.0 |
overflow
类型 | 默认值 |
---|---|
enum('visible' , 'hidden' ) | 'visible' |
overlayColor
Android
当图像具有圆角时,指定 overlayColor 将导致角落中的剩余空间填充为纯色。这在 Android 圆角实现不支持的情况下很有用
- 某些缩放模式,例如
'contain'
- 动画 GIF
使用此 prop 的典型方法是将图像显示在纯色背景上,并将 overlayColor
设置为与背景相同的颜色。
有关其底层工作原理的详细信息,请参阅 Fresco 文档。
类型 |
---|
string |
resizeMode
确定当帧与原始图像尺寸不匹配时如何调整图像大小。默认为 cover
。
-
cover
:均匀缩放图像(保持图像的纵横比),以便- 图像的两个维度(宽度和高度)将等于或大于视图的相应维度(减去内边距)
- 缩放图像的至少一个维度将等于视图的相应维度(减去内边距)
-
contain
:均匀缩放图像(保持图像的纵横比),以便图像的两个维度(宽度和高度)将等于或小于视图的相应维度(减去内边距)。 -
stretch
:独立缩放宽度和高度,这可能会更改 src 的纵横比。 -
repeat
:重复图像以覆盖视图的帧。图像将保持其大小和纵横比,除非它大于视图,在这种情况下,它将被均匀缩小,使其包含在视图中。 -
center
:沿两个维度将图像在视图中居中。如果图像大于视图,则均匀缩小图像,使其包含在视图中。
类型 | 默认值 |
---|---|
enum('cover' , 'contain' , 'stretch' , 'repeat' , 'center' ) | 'cover' |
objectFit
确定当帧与原始图像尺寸不匹配时如何调整图像大小。
类型 | 默认值 |
---|---|
enum('cover' , 'contain' , 'fill' , 'scale-down' ) | 'cover' |
tintColor
将所有非透明像素的颜色更改为 tintColor。
类型 |
---|
color |