跳到主要内容

阴影属性

参考资料

React Native 中有三套阴影相关的 API：

  • boxShadow：一个 View 样式属性，是对同名 Web 样式属性的规范实现。
  • dropShadow：View 样式属性 filter 的一个特定滤镜函数。
  • 各种 shadow 属性（shadowColor、shadowOffset、shadowOpacity、shadowRadius）：直接映射到底层平台提供的原生 API。

dropShadow 和 boxShadow 的区别如下：

  • dropShadow 作为 filter 的一部分存在，而 boxShadow 是一个独立的样式属性。
  • dropShadow 是一个 alpha 遮罩，因此只有 alpha 值为正的像素才会“投射”阴影。boxShadow 无论内容如何（除非是内阴影），都会围绕元素的边框框投射阴影。
  • dropShadow 仅在 Android 上可用，而 boxShadow 在 iOS 和 Android 上均可用。
  • dropShadow 不能像 boxShadow 那样设置为内阴影（inset）。
  • dropShadow 没有像 boxShadow 那样的 spreadDistance 参数。

相比之下，boxShadow 和 dropShadow 通常比 shadow 属性功能更强大。但 shadow 属性映射到底层平台原生 API，因此如果只需要简单的阴影效果，推荐使用这些属性。注意，只有 shadowColor 在 Android 和 iOS 上都有效，其他 shadow 属性仅在 iOS 上有效。

属性​

boxShadow​

文档见 View Style Props。

dropShadow
Android
​

文档见 View Style Props。

shadowColor​

设置阴影的颜色。

此属性仅在 Android API 28 及以上有效。若需在较低版本 Android API 上实现类似功能，请使用 elevation 属性。

类型
color

shadowOffset
iOS
​

设置阴影偏移量。

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

shadowOpacity
iOS
​

设置阴影的不透明度（会乘以颜色的 alpha 分量）。

类型
number

shadowRadius
iOS
​

设置阴影模糊半径。

类型
number