阴影属性

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 值的像素才会“投射”阴影。boxShadow 将围绕元素的边框盒投射阴影，无论其内容如何（除非它是内嵌的）。
• dropShadow 仅在 Android 上可用，boxShadow 在 iOS 和 Android 上均可用。
• dropShadow 不能像 boxShadow 那样设置为内嵌。
• dropShadow 没有像 boxShadow 那样的 spreadDistance 参数。

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

属性

boxShadow

请参阅 View 样式属性 以获取文档。

dropShadow

Android

请参阅 View 样式属性 以获取文档。

shadowColor

设置投影颜色。

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

类型
颜色

---

shadowOffset

iOS

设置投影偏移量。

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

---

shadowOpacity

iOS

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

类型
数字

---

shadowRadius

iOS

设置投影模糊半径。

类型
数字