Shadow Props

TypeScript

JavaScript

---

参考

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