跳到主要内容
Version: Next

View Style Props

示例

参考文档

Props

backfaceVisibility

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

backgroundColor

类型
color

borderBottomColor

类型
color

borderBlockColor

类型
color

borderBlockEndColor

类型
color

borderBlockStartColor

类型
color

borderBottomEndRadius

类型
number, string (百分比值)

borderBottomLeftRadius

类型
number, string (百分比值)

borderBottomRightRadius

类型
number, string (百分比值)

borderBottomStartRadius

类型
number, string (百分比值)

borderStartEndRadius

类型
number, string (百分比值)

borderStartStartRadius

类型
number, string (百分比值)

borderEndEndRadius

类型
number, string (百分比值)

borderEndStartRadius

类型
number, string (百分比值)

borderBottomWidth

类型
number

borderColor

类型
color

borderCurve
iOS

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

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

borderEndColor

类型
color

borderLeftColor

类型
color

borderLeftWidth

类型
number

borderRadius

如果圆角边框不可见,可以尝试同时添加 overflow: 'hidden'

类型
number, string (百分比值)

borderRightColor

类型
color

borderRightWidth

类型
number

borderStartColor

类型
color

borderStyle

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

borderTopColor

类型
color

borderTopEndRadius

类型
number, string (百分比值)

borderTopLeftRadius

类型
number, string (百分比值)

borderTopRightRadius

类型
number, string (百分比值)

borderTopStartRadius

类型
number, string (百分比值)

borderTopWidth

类型
number, string (百分比值)

borderWidth

类型
number

boxShadow

note

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

为元素添加阴影效果,可以控制阴影的位置、颜色、大小和模糊度。根据阴影是否为 inset,阴影会出现在元素边框框的外部或内部。这是与 web 同名样式属性规范一致的实现。详细参数请参阅 BoxShadowValue 文档。

多个阴影可以组合在一起,使单个 boxShadow 包含多个不同的阴影。

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

类型
array of BoxShadowValue objects | string

cursor
iOS

在 iOS 17+ 上,设置为 pointer 后,当指针设备(如 iOS 上的触控板或手写笔,或 visionOS 上的用户注视)悬停在视图上时,可以启用悬停效果。

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

elevation
Android

使用 Android 底层的 elevation API 设置视图的高度。这会为元素添加投影并影响重叠视图的 z 轴顺序。仅支持 Android 5.0+,在更早版本上无效。

类型
number

filter

note

filter 仅在新架构下可用。

View 添加图形滤镜。该滤镜由多个 滤镜函数 组成,每个函数代表对 View 图形合成的某种原子变换。完整的有效滤镜函数列表如下。filter 会同时应用于 View 本身及其后代。filter 隐含了 overflow: hidden,因此后代元素会被裁剪以适应 View 的边界。

以下滤镜函数在所有平台上均可用:

  • brightness:改变 View 的亮度。接受非负数或百分比。
  • opacity:改变 View 的不透明度(alpha 值)。接受非负数或百分比。
note

由于性能和规范合规性问题,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饱和度。接受非负数或百分比。
note

blurdropShadow 仅支持 Android 12+

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

类型
array of objects: {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} or string

mixBlendMode

note

mixBlendMode 仅在新架构下可用。

控制 View 如何与其层叠上下文中的其他元素进行颜色混合。有关每种混合函数的完整概述,请查阅 MDN 文档

如需更精细地控制哪些元素参与混合,请参阅 isolation

mixBlendMode 值
  • normal:元素绘制在背景之上,不进行混合。
  • multiply:将源颜色与目标颜色相乘并替换目标。
  • screen:将背景和源颜色值的补色相乘,然后取结果的补色。
  • overlay:根据背景颜色值进行正片叠底或滤色。
  • darken:选择背景和源颜色中较暗的一个。
  • lighten:选择背景和源颜色中较亮的一个。
  • color-dodge:提亮背景颜色以反映源颜色。使用黑色绘制不会产生变化。
  • color-burn:加暗背景颜色以反映源颜色。使用白色绘制不会产生变化。
  • hard-light:根据源颜色值进行正片叠底或滤色。效果类似于在背景上打一盏强聚光灯。
  • soft-light:根据源颜色值使颜色变暗或变亮。效果类似于在背景上打一盏漫射聚光灯。
  • difference:从较亮的颜色中减去两个组成颜色中较暗的一个。
  • exclusion:产生类似差值模式但对比度较低的效果。
  • hue:使用源颜色的色相与背景颜色的饱和度和亮度创建颜色。
  • saturation:使用源颜色的饱和度与背景颜色的色相和亮度创建颜色。
  • color:使用源颜色的色相和饱和度与背景颜色的亮度创建颜色。此模式保留了背景的灰度级别,适用于为单色图像着色或为彩色图像添加色调。
  • luminosity:使用源颜色的亮度与背景颜色的色相和饱和度创建颜色。产生与 color 模式相反的效果。
类型
enum('normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity')

opacity

类型
number

outlineColor

note

outlineColor 仅在新架构下可用。

设置元素轮廓的颜色。更多详情请参阅 web 文档

类型
color

outlineOffset

note

outlineOffset 仅在新架构下可用。

设置轮廓与元素边界之间的间距。不影响布局。更多详情请参阅 web 文档

类型
number

outlineStyle

note

outlineStyle 仅在新架构下可用。

设置元素轮廓的样式。更多详情请参阅 web 文档

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

outlineWidth

note

outlineWidth 仅在新架构下可用。

绘制在元素边框外部的轮廓宽度。不影响布局。更多详情请参阅 web 文档

类型
number

pointerEvents

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

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