阴影属性
- TypeScript
- JavaScript
参考
React Native 中有 3 组阴影 API
boxShadow
: 一个 View 样式属性,也是一个符合规范的实现,与 同名的 web 样式属性。dropShadow
: 一个特定的滤镜函数,作为filter
View 样式属性的一部分提供。- 各种
shadow
属性(shadowColor
、shadowOffset
、shadowOpacity
、shadowRadius
):这些直接映射到平台级 API 暴露的对应原生属性。
dropShadow
和 boxShadow
之间的区别如下
dropShadow
作为filter
的一部分存在,而boxShadow
是一个独立的样式属性。dropShadow
是一个 alpha 遮罩,因此只有具有正 alpha 值的像素才会“投射”阴影。boxShadow
会围绕元素的边框盒投射阴影,无论其内容如何(除非是内嵌阴影)。dropShadow
仅在 Android 上可用,boxShadow
在 iOS 和 Android 上都可用。dropShadow
不能像boxShadow
那样设置为内嵌阴影。dropShadow
没有像boxShadow
那样的spreadDistance
参数。
通常,boxShadow
和 dropShadow
都比 shadow
属性功能更强大。然而,shadow
属性映射到原生平台级 API,因此如果您只需要一个简单的阴影,建议使用这些属性。请注意,只有 shadowColor
在 Android 和 iOS 上都有效,所有其他 shadow
属性仅在 iOS 上有效。
属性
boxShadow
请参阅 视图样式属性 以获取文档。
dropShadow
Android
请参阅 视图样式属性 以获取文档。
shadowColor
设置投影(drop shadow)颜色。
此属性仅适用于 Android API 28 及更高版本。对于较低 Android API 上的类似功能,请使用 elevation
属性。
类型 |
---|
颜色 |
shadowOffset
iOS
设置投影(drop shadow)偏移量。
类型 |
---|
对象:{width: number,height: number} |
shadowOpacity
iOS
设置投影(drop shadow)不透明度(乘以颜色的 alpha 分量)。
类型 |
---|
数字 |
shadowRadius
iOS
设置投影(drop shadow)模糊半径。
类型 |
---|
数字 |