Skip to main content

影子属性

参考

¥Reference

React Native 中有 3 组阴影 API：

¥There are 3 sets of shadow APIs in React Native:

  • boxShadow：视图样式属性和符合规范的 同名的 Web 样式属性 实现。

    ¥boxShadow: A View style prop and a spec-compliant implementation of the web style prop of the same name.

  • dropShadow：作为 filter View 样式 prop 的一部分，提供特定的过滤功能。

    ¥dropShadow: A specific filter function available as part of the filter View style prop.

  • 各种 shadow 属性（shadowColor、shadowOffset、shadowOpacity、shadowRadius）：它们直接映射到平台级 API 公开的原生对应物。

    ¥Various shadow props (shadowColor, shadowOffset, shadowOpacity, shadowRadius): These map directly to their native counterparts exposed by the platform-level APIs.

dropShadow 和 boxShadow 之间的区别如下：

¥The difference between dropShadow and boxShadow are as follows:

  • dropShadow 作为 filter 的一部分存在，而 boxShadow 是一个独立样式的属性。

    ¥dropShadow exists as part of filter, whereas boxShadow is a standalone style prop.

  • dropShadow 是一个 alpha 蒙版，因此只有具有正 alpha 值的像素才会产生阴影。无论元素的内容是什么，boxShadow 都会投射到元素的边框周围（除非它是插入的）。

    ¥dropShadow is an alpha mask, so only pixels with a positive alpha value will "cast" a shadow. boxShadow will cast around the border box of the element no matter it's contents (unless it is inset).

  • dropShadow 仅在 Android 上可用，boxShadow 可在 iOS 和 Android 上可用。

    ¥dropShadow is only available on Android, boxShadow is available on iOS and Android.

  • dropShadow 不能像 boxShadow 那样嵌入。

    ¥dropShadow cannot be inset like boxShadow.

  • dropShadow 没有像 boxShadow 那样的 spreadDistance 参数。

    ¥dropShadow does not have the spreadDistance argument like boxShadow.

boxShadow 和 dropShadow 通常都比 shadow props 更强大。但是，shadow props 映射到原生平台级 API，因此如果你只需要一个简单的阴影，建议使用这些 props。请注意，只有 shadowColor 适用于 Android 和 iOS，所有其他 shadow 属性仅适用于 iOS。

¥Both boxShadow and dropShadow are generally more capable than the shadow props. The shadow props, however, map to native platform-level APIs, so if you only need a straightforward shadow these props are recommended. Note that only shadowColor works on both Android and iOS, all other shadow props only work on iOS.

属性​

¥Props

boxShadow​

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

¥See View Style Props for documentation.

dropShadow
Android
​

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

¥See View Style Props for documentation.

shadowColor​

设置阴影颜色。

¥Sets the drop shadow color.

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

¥This property will only work on Android API 28 and above. For similar functionality on lower Android APIs, use the elevation property.

类型
color

shadowOffset
iOS
​

设置阴影偏移。

¥Sets the drop shadow offset.

类型
目的：{width: number,height: number}

shadowOpacity
iOS
​

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

¥Sets the drop shadow opacity (multiplied by the color's alpha component).

类型
number

shadowRadius
iOS
​

设置阴影模糊半径。

¥Sets the drop shadow blur radius.

类型
number