跳到主要内容
版本：0.81

阴影属性

参考

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

类型
color

shadowOffset
iOS
​

设置投影偏移量。

类型
object: {width: number,height: number}

shadowOpacity
iOS
​

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

类型
number

shadowRadius
iOS
​

设置投影模糊半径。

类型
number