跳到主要内容
版本:0.81

View 样式属性

示例

参考

属性

backfaceVisibility

类型
枚举 ('visible', 'hidden')

backgroundColor

类型
颜色

borderBottomColor

类型
颜色

borderBlockColor

类型
颜色

borderBlockEndColor

类型
颜色

borderBlockStartColor

类型
颜色

borderBottomEndRadius

类型
数字,字符串(百分比值)

borderBottomLeftRadius

类型
数字,字符串(百分比值)

borderBottomRightRadius

类型
数字,字符串(百分比值)

borderBottomStartRadius

类型
数字,字符串(百分比值)

borderStartEndRadius

类型
数字,字符串(百分比值)

borderStartStartRadius

类型
数字,字符串(百分比值)

borderEndEndRadius

类型
数字,字符串(百分比值)

borderEndStartRadius

类型
数字,字符串(百分比值)

borderBottomWidth

类型
数字

borderColor

类型
颜色

borderCurve
iOS

在 iOS 13+ 上,可以更改边框的角曲线。

类型
枚举 ('circular', 'continuous')

borderEndColor

类型
颜色

borderLeftColor

类型
颜色

borderLeftWidth

类型
数字

borderRadius

如果圆角边框不可见,尝试同时应用 overflow: 'hidden'

类型
数字,字符串(百分比值)

borderRightColor

类型
颜色

borderRightWidth

类型
数字

borderStartColor

类型
颜色

borderStyle

类型
枚举 ('solid', 'dotted', 'dashed')

borderTopColor

类型
颜色

borderTopEndRadius

类型
数字,字符串(百分比值)

borderTopLeftRadius

类型
数字,字符串(百分比值)

borderTopRightRadius

类型
数字,字符串(百分比值)

borderTopStartRadius

类型
数字,字符串(百分比值)

borderTopWidth

类型
数字,字符串(百分比值)

borderWidth

类型
数字

boxShadow

备注

boxShadow 仅适用于 新架构。外阴影仅支持 Android 9+。内阴影仅支持 Android 10+

为元素添加阴影效果,能够控制阴影的位置、颜色、大小和模糊度。根据阴影是否为 内嵌 (inset),此阴影要么出现在元素边框盒的外部,要么出现在内部。这是 同名的 web 样式属性 的规范兼容实现。阅读 BoxShadowValue 文档以了解所有可用参数的更多信息。

这些阴影可以组合在一起,以便单个 boxShadow 可以由多个不同的阴影组成。

boxShadow 接受一个模仿 web 语法 的字符串,或一个 BoxShadowValue 对象数组。

类型
BoxShadowValue 对象数组 | 字符串

cursor
iOS

在 iOS 17+ 上,设置为 pointer 允许当指针(例如 iOS 上的触控板或 stylus,或 visionOS 上的用户视线)悬停在视图上时产生悬停效果。

类型
枚举 ('auto', 'pointer')

elevation
Android

设置视图的 elevation,使用 Android 底层的 elevation API。这会给项目添加投影并影响重叠视图的 z-order。仅支持 Android 5.0+,早期版本无效。

类型
数字

filter

备注

filter 仅适用于 新架构

View 添加图形滤镜。此滤镜由任意数量的 滤镜函数 组成,每个函数代表对 View 图形组合的一些原子更改。有效滤镜函数的完整列表定义如下。filter 将应用于 View 的后代以及 View 本身。filter 隐含 overflow: hidden,因此后代将被裁剪以适应 View 的边界。

以下滤镜函数适用于所有平台:

  • brightness: 更改 View 的亮度。接受非负数字或百分比。
  • opacity: 更改 View 的不透明度或 alpha。接受非负数字或百分比。
备注

由于性能和规范合规性问题,这些是 iOS 上仅有的两个可用滤镜函数。有计划探索使用 SwiftUI 代替 UIKit 来实现此功能的一些潜在变通方法。

Android

以下滤镜函数仅适用于 Android:

  • blur: 使用 高斯模糊 模糊 View,其中指定的长度代表模糊算法中使用的半径。任何非负 DIP 值均有效(无百分比)。值越大,结果越模糊。
  • contrast: 更改 View 的对比度。接受非负数字或百分比。
  • dropShadow: 在 View 的 alpha 遮罩周围添加阴影(只有 View 中非零 alpha 像素才会投射阴影)。接受一个可选颜色代表阴影颜色,以及 2 或 3 个长度。如果指定了 2 个长度,它们被解释为 offsetXoffsetY,将分别在 X 和 Y 维度上平移阴影。如果给出第 3 个长度,它被解释为用于阴影的高斯模糊的标准差——因此较大的值会使阴影更模糊。阅读 DropShadowValue 中的参数更多信息。
  • grayscale: 按指定量将 View 转换为 灰度。接受非负数字或百分比,其中 1100% 代表完全灰度。
  • hueRotate: 更改 View 的 色相。此函数的参数定义色轮的角度,色相将围绕该角度旋转,例如 360deg 将无效。此角度可以使用 degrad 单位。
  • invert: 反转 View 中的颜色。接受非负数字或百分比,其中 1100% 代表完全反转。
  • sepia: 将 View 转换为 深褐色。接受非负数字或百分比,其中 1100% 代表完全深褐色。
  • saturate: 更改 View饱和度。接受非负数字或百分比。
备注

blurdropShadow 仅支持 Android 12+

filter 接受一个由上述滤镜函数组成的对象数组,或一个模仿 web 语法 的字符串。

类型
对象数组:{brightness: number|string}, {opacity: number|string}, {blur: number|string}, {contrast: number|string}, {dropShadow: DropShadowValue|string}, {grayscale: number|string}, {hueRotate: number|string}, {invert: number|string}, {sepia: number|string}, {saturate: number|string} 或 字符串

mixBlendMode

备注

mixBlendMode 仅适用于 新架构Android 10+

控制 View 如何与其堆叠上下文中的其他元素混合颜色。查看 MDN 文档 以全面了解每个混合函数。

对于更细粒度的控制,请参阅 isolation

mixBlendMode 值
  • normal: 元素绘制在其背景之上而不混合。
  • multiply: 源颜色乘以目标颜色并替换目标。
  • screen: 乘以背景和源颜色值的补色,然后对结果取补。
  • overlay: 根据背景颜色值,乘以或筛选颜色。
  • darken: 选择背景和源颜色中较暗的一个。
  • lighten: 选择背景和源颜色中较亮的一个。
  • color-dodge: 提亮背景颜色以反映源颜色。用黑色绘制不会产生变化。
  • color-burn: 变暗背景颜色以反映源颜色。用白色绘制不会产生变化。
  • hard-light: 根据源颜色值,乘以或筛选颜色。效果类似于在背景上照射强烈的聚光灯。
  • soft-light: 根据源颜色值,变暗或提亮颜色。效果类似于在背景上照射漫射聚光灯。
  • difference: 从较浅的颜色中减去两个组成颜色中较暗的一个。
  • exclusion: 产生类似于差异模式的效果,但对比度较低。
  • hue: 创建一种颜色,具有源颜色的色相和背景颜色的饱和度和亮度。
  • saturation: 创建一种颜色,具有源颜色的饱和度和背景颜色的色相和亮度。
  • color: 创建一种颜色,具有源颜色的色相和饱和度以及背景颜色的亮度。这保留了背景的灰度级别,对于为单色图像着色或为彩色图像着色很有用。
  • luminosity: 创建一种颜色,具有源颜色的亮度和背景颜色的色相和饱和度。这产生与颜色模式相反的效果。
类型
枚举 ('normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity')

opacity

类型
数字

outlineColor

备注

outlineColor 仅适用于 新架构

设置元素轮廓的颜色。参见 web 文档 了解更多详情。

类型
颜色

outlineOffset

备注

outlineOffset 仅适用于 新架构

设置轮廓与元素边界之间的空间量。不影响布局。参见 web 文档 了解更多详情。

类型
数字

outlineStyle

备注

outlineStyle 仅适用于 新架构

设置元素轮廓的样式。参见 web 文档 了解更多详情。

类型
枚举 ('solid', 'dotted', 'dashed')

outlineWidth

备注

outlineWidth 仅适用于 新架构

绘制在元素周围、边框外部的轮廓宽度。不影响布局。参见 web 文档 了解更多详情。

类型
数字

pointerEvents

控制 View 是否可以成为触摸事件的目标。

  • 'auto': View 可以成为触摸事件的目标。
  • 'none': View 永远不会成为触摸事件的目标。
  • 'box-none': View 永远不会成为触摸事件的目标,但其子视图可以。
  • 'box-only': View 可以成为触摸事件的目标,但其子视图不可以。
类型
枚举 ('auto', 'box-none', 'box-only', 'none' )