跳至主内容
版本：0.78

阴影属性

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

参考

React Native 中有三组阴影 API：

  • boxShadow：视图样式属性，是对同名 Web 样式属性的规范兼容实现。

  • dropShadow：特定滤镜函数，属于 filter 视图样式属性的一部分。

  • 多种 shadow 属性（shadowColor、shadowOffset、shadowOpacity、shadowRadius）：这些直接映射到平台级 API 暴露的本地对应属性。

dropShadow 与 boxShadow 的区别如下：

  • dropShadow 属于 filter 的一部分，而 boxShadow 是独立的样式属性。

  • dropShadow 基于 alpha 遮罩，仅 alpha 值为正的像素会产生阴影；boxShadow 则始终围绕元素边框产生阴影（内阴影除外）。

  • 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 实现类似效果，请使用 elevation 属性。

Type
color

shadowOffset
iOS
​

设置阴影偏移量。

Type
object: {width: number,height: number}

shadowOpacity
iOS
​

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

Type
number

shadowRadius
iOS
​

设置阴影模糊半径。

Type
number