跳到主要内容

View 样式属性

示例

参考

属性

backfaceVisibility

类型
enum('visible', 'hidden')

backgroundColor

类型
颜色

borderBottomColor

类型
颜色

borderBottomEndRadius

类型
数字

borderBottomLeftRadius

类型
数字

borderBottomRightRadius

类型
数字

borderBottomStartRadius

类型
数字

borderStartEndRadius

类型
数字

borderStartStartRadius

类型
数字

borderEndEndRadius

类型
数字

borderEndStartRadius

类型
数字

borderBottomWidth

类型
数字

borderColor

类型
颜色

borderCurve
iOS

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

类型
enum('circular', 'continuous')

borderEndColor

类型
颜色

borderLeftColor

类型
颜色

borderLeftWidth

类型
数字

borderRadius

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

类型
数字

borderRightColor

类型
颜色

borderRightWidth

类型
数字

borderStartColor

类型
颜色

borderStyle

类型
enum('solid', 'dotted', 'dashed')

borderTopColor

类型
颜色

borderTopEndRadius

类型
数字

borderTopLeftRadius

类型
数字

borderTopRightRadius

类型
数字

borderTopStartRadius

类型
数字

borderTopWidth

类型
数字

borderWidth

类型
数字

boxShadow

注意

boxShadow 仅在新架构上可用。新架构。外阴影仅在 Android 9+ 上受支持。内阴影仅在 Android 10+ 上受支持。

为元素添加阴影效果,可以控制阴影的位置、颜色、大小和模糊度。此阴影会出现在元素的边框框的外部或内部,具体取决于阴影是否为内阴影。这是对同名的 Web 样式属性的符合规范的实现。阅读BoxShadowValue文档,详细了解所有可用的参数。

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

boxShadow 接受模仿Web 语法的字符串或 BoxShadowValue 对象数组。

类型
BoxShadowValue 对象数组 | 字符串

光标
iOS

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

类型
enum('auto', 'pointer')

海拔
Android

使用 Android 的底层elevation API设置视图的海拔高度。这会为项目添加阴影效果,并影响重叠视图的 z 顺序。仅在 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 维度上平移阴影。如果给出了第三个长度,则将其解释为用于阴影的高斯模糊的标准偏差 - 因此值越大,阴影越模糊。阅读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} 或字符串

opacity

类型
数字

outlineColor

注意

outlineColor 仅在新架构上可用。新架构

设置元素轮廓的颜色。有关更多详细信息,请参阅Web 文档

类型
颜色

outlineOffset

注意

outlineOffset 仅在新架构上可用。新架构

设置轮廓与元素边界之间的空间量。不影响布局。有关更多详细信息,请参阅Web 文档

类型
数字

outlineStyle

注意

outlineStyle 仅在新架构上可用。新架构

设置元素轮廓的样式。有关更多详细信息,请参阅Web 文档

类型
enum('solid', 'dotted', 'dashed')

outlineWidth

注意

outlineWidth 仅在新架构上可用。新架构

绘制在元素周围(边框外部)的轮廓宽度。不影响布局。有关更多详细信息,请参阅Web 文档

类型
数字

pointerEvents

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

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