第52章 React Native 第52章：图片样式属性（Image Style Props）详解

版本：0.77Image Style Props 示例​

图片缩放模式​

图片边框​

图片圆角​

图片着色​

参考 属性​ backfaceVisibility​ 该属性定义旋转后图片的背面是否可见。 TypeDefaultenum('visible', 'hidden')'visible'

backgroundColor​ Typecolor

borderBottomLeftRadius​ Typenumber

borderBottomRightRadius​ Typenumber

borderColor​ Typecolor

borderRadius​ Typenumber

borderTopLeftRadius​ Typenumber

borderTopRightRadius​ Typenumber

borderWidth​ Typenumber

opacity​ 设置图片的透明度，取值范围为 0.0 到 1.0。 TypeDefaultnumber1.0

overflow​ TypeDefaultenum('visible', 'hidden')'visible'

overlayColor Android​ 当图片有圆角时，指定 overlayColor 可以用纯色填充圆角处的剩余空间。这在 Android 圆角实现不支持的场景下很有用：

某些缩放模式，如 'contain' 动态 GIF 图片

一个常见的用法是：图片显示在纯色背景上时，把 overlayColor 设置为与背景相同的颜色。 关于底层实现细节，请参阅 Fresco 文档。 Typestring

resizeMode​ 决定当容器尺寸与图片原始尺寸不一致时如何缩放图片。默认为 cover。

cover: 等比缩放图片（保持宽高比），使得：

图片的宽和高都大于或等于容器的对应尺寸（减去内边距） 缩放后图片至少有一个维度等于容器的对应尺寸（减去内边距）

contain: 等比缩放图片（保持宽高比），使得图片的宽和高都不超过容器的对应尺寸（减去内边距）。

stretch: 宽高独立缩放，这可能会改变图片的原始宽高比。

repeat: 平铺图片以填满容器。图片保持原始尺寸和宽高比；如果图片大于容器，则等比缩小至完全放入容器。

center: 图片在容器中居中显示。如果图片大于容器，则等比缩小至完全放入容器。

TypeDefaultenum('cover', 'contain', 'stretch', 'repeat', 'center')'cover'

objectFit​ 决定当容器尺寸与图片原始尺寸不一致时如何缩放图片。 TypeDefaultenum('cover', 'contain', 'fill', 'scale-down')'cover'

tintColor​ 将图片中所有非透明像素的颜色改为 tintColor 指定的颜色。 Typecolor