跳到主要内容

阴影属性


参考

React Native 中有 3 组阴影 API

  • boxShadow:一个 View 样式属性,是对同名 Web 样式属性的规范实现。
  • dropShadow:作为 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

有关文档,请参见视图样式属性

dropShadow
Android

有关文档,请参见视图样式属性

shadowColor

设置投射阴影颜色。

此属性仅适用于 Android API 28 及以上版本。对于较低 Android API 上类似的功能,请使用elevation 属性

类型
颜色

shadowOffset
iOS

设置投射阴影偏移。

类型
对象:{width: number, height: number}

shadowOpacity
iOS

设置投射阴影不透明度(乘以颜色的 alpha 分量)。

类型
数字

shadowRadius
iOS

设置投射阴影模糊半径。

类型
数字