跳到主要内容
Version: Next

Shadow Props

参考

React Native 中有 3 组阴影 API：

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

dropShadow 和 boxShadow 的区别如下：

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

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

Props​

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