跳到主要内容

阴影属性

参考

React Native 中有 3 组 shadow 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​

有关文档，请参阅视图样式属性。

dropShadow
Android
​

有关文档，请参阅视图样式属性。

shadowColor​

设置投影颜色。

此属性仅适用于 Android API 28 及更高版本。要在较低版本的 Android API 上实现类似功能，请使用 elevation 属性。

类型
颜色

shadowOffset
iOS
​

设置投影偏移量。

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

shadowOpacity
iOS
​

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

类型
number

shadowRadius
iOS
​

设置投影模糊半径。

类型
number