跳到主要内容

Shadow Props

参考

React Native 中有 3 组阴影 API

  • boxShadow：View 样式 prop 和 同名的 web 样式 prop 的符合规范的实现。
  • dropShadow：一个特定的过滤器函数，作为 filter View 样式 prop 的一部分提供。
  • 各种 shadow props (shadowColor, shadowOffset, shadowOpacity, shadowRadius)：这些直接映射到平台级 API 公开的本机对应项。

dropShadow 和 boxShadow 之间的区别如下

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

boxShadow 和 dropShadow 通常比 shadow props 功能更强大。然而，shadow props 映射到本机平台级 API，因此如果只需要简单的阴影，建议使用这些 props。请注意，只有 shadowColor 在 Android 和 iOS 上都有效，所有其他 shadow props 仅在 iOS 上有效。

Props​

boxShadow​

有关文档，请参阅 View Style Props。

dropShadow
Android
​

有关文档，请参阅 View Style Props。

shadowColor​

设置阴影颜色。

此属性仅在 Android API 28 及更高版本上有效。对于较低 Android API 上的类似功能，请使用 elevation 属性。

类型
color

shadowOffset
iOS
​

设置阴影偏移。

类型
object: {width: number,height: number}

shadowOpacity
iOS
​

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

类型
number

shadowRadius
iOS
​

设置阴影模糊半径。

类型
number