Image Style Props
示例
图片缩放模式
图片边框
图片圆角
图片着色
参考文档
Props
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
此属性的典型用法是在纯色背景上显示图片,并将 overlayColor 设置为与背景相同的颜色。
有关底层工作原理的详细信息,请参阅 Fresco 文档。
| 类型 |
|---|
| string |
resizeMode
决定当图片框架与原始图片尺寸不匹配时如何调整图片大小。默认为 cover。
-
cover:等比缩放图片(保持图片宽高比),使得:- 图片的两个维度(宽和高)都等于或大于视图对应维度(减去内边距)
- 缩放后图片的至少一个维度等于视图的对应维度(减去内边距)
-
contain:等比缩放图片(保持图片宽高比),使得图片的两个维度(宽和高)都等于或小于视图对应维度(减去内边距)。 -
stretch:独立缩放宽度和高度,这可能会改变图片的宽高比。 -
repeat:重复图片以覆盖视图的整个框架。图片会保持其原始大小和宽高比,除非图片大于视图,此时会等比缩小以适应视图。 -
center:在两个方向上将图片居中于视图。如果图片大于视图,则等比缩小以适应视图。
| 类型 | 默认值 |
|---|---|
enum('cover', 'contain', 'stretch', 'repeat', 'center') | 'cover' |
objectFit
决定当图片框架与原始图片尺寸不匹配时如何调整图片大小。
| 类型 | 默认值 |
|---|---|
enum('cover', 'contain', 'fill', 'scale-down') | 'cover' |
tintColor
将所有非透明像素的颜色更改为 tintColor。
| 类型 |
|---|
| color |