阴影属性
- TypeScript
- JavaScript
参考
React Native 中有 3 组阴影 API
boxShadow
:一个 View 样式属性,并且是 同名 web 样式属性 的符合规范的实现。dropShadow
:一个特定的 filter 函数,作为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
有关文档,请参阅 View 样式属性。
dropShadow
Android
有关文档,请参阅 View 样式属性。
shadowColor
设置阴影颜色。
此属性仅在 Android API 28 及更高版本上有效。 为了在较低版本的 Android API 上获得类似的功能,请使用 elevation
属性。
类型 |
---|
color |
shadowOffset
iOS
设置阴影偏移量。
类型 |
---|
object: {width: number,height: number} |
shadowOpacity
iOS
设置阴影不透明度(乘以颜色的 alpha 分量)。
类型 |
---|
number |
shadowRadius
iOS
设置阴影模糊半径。
类型 |
---|
number |