阴影属性

TypeScript

JavaScript

---

参考

React Native 中有三组阴影 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

请参阅 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