阴影属性

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

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

属性

boxShadow

请参阅 视图样式属性 获取文档。

dropShadow

Android

请参阅 视图样式属性 获取文档。

shadowColor

设置投影颜色。

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

类型
颜色

---

shadowOffset

iOS

设置投影偏移量。

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

---

shadowOpacity

iOS

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

类型
数字

---

shadowRadius

iOS

设置投影模糊半径。

类型
数字