跳到主要内容

阴影属性


参考

React Native 中有 3 组阴影 API

  • boxShadow:一个 View 样式属性,并且是 同名 web 样式属性 的符合规范的实现。
  • dropShadow:一个特定的 filter 函数,作为 filter View 样式属性的一部分提供。
  • 各种 shadow 属性 (shadowColorshadowOffsetshadowOpacityshadowRadius):这些属性直接映射到平台级 API 公开的本地对应项。

dropShadowboxShadow 之间的区别如下

  • dropShadow 作为 filter 的一部分存在,而 boxShadow 是一个独立的样式属性。
  • dropShadow 是一个 alpha 蒙版,因此只有具有正 alpha 值的像素才会“投射”阴影。boxShadow 将在元素的边框框周围投射阴影,无论其内容如何(除非它是插页)。
  • dropShadow 仅在 Android 上可用,boxShadow 在 iOS 和 Android 上都可用。
  • dropShadow 不能像 boxShadow 那样设置为内阴影。
  • dropShadow 没有像 boxShadow 那样的 spreadDistance 参数。

总的来说,boxShadowdropShadow 都比 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