阴影属性
- 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
设置投射阴影颜色。
此属性仅适用于 Android API 28 及以上版本。对于较低 Android API 上类似的功能,请使用elevation
属性。
类型 |
---|
颜色 |
shadowOffset
iOS
设置投射阴影偏移。
类型 |
---|
对象:{width: number, height: number} |
shadowOpacity
iOS
设置投射阴影不透明度(乘以颜色的 alpha 分量)。
类型 |
---|
数字 |
shadowRadius
iOS
设置投射阴影模糊半径。
类型 |
---|
数字 |