跳到主要内容

View Style Props

示例​

参考

Props​

backfaceVisibility​

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

backgroundColor​

类型
color

borderBottomColor​

类型
color

borderBottomEndRadius​

类型
number

borderBottomLeftRadius​

类型
number

borderBottomRightRadius​

类型
number

borderBottomStartRadius​

类型
number

borderStartEndRadius​

类型
number

borderStartStartRadius​

类型
number

borderEndEndRadius​

类型
number

borderEndStartRadius​

类型
number

borderBottomWidth​

类型
number

borderColor​

类型
color

borderCurve
iOS
​

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

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

borderEndColor​

类型
color

borderLeftColor​

类型
color

borderLeftWidth​

类型
number

borderRadius​

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

类型
number

borderRightColor​

类型
color

borderRightWidth​

类型
number

borderStartColor​

类型
color

borderStyle​

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

borderTopColor​

类型
color

borderTopEndRadius​

类型
number

borderTopLeftRadius​

类型
number

borderTopRightRadius​

类型
number

borderTopStartRadius​

类型
number

borderTopWidth​

类型
number

borderWidth​

类型
number

boxShadow​

注意

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

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

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

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

类型
BoxShadowValue 对象数组 | 字符串

cursor
iOS
​

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

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

elevation
Android
​

使用 Android 的底层 elevation API 设置视图的海拔高度。这会为项目添加阴影效果，并影响重叠视图的 z 轴顺序。仅在 Android 5.0+ 上受支持，在早期版本上无效。

类型
number

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 个长度，则它们被解释为 offsetX 和 offsetY，这将分别在 X 和 Y 维度上平移阴影。如果给出第三个长度，则将其解释为用于阴影的高斯模糊的标准偏差 - 因此值越大，阴影越模糊。阅读DropShadowValue中有关参数的更多信息。
  • grayscale：按指定的量将 View 转换为灰度。接受非负数或百分比，其中 1 或 100% 表示完全灰度。
  • hueRotate：更改 View 的色相。此函数的参数定义了色轮的角度，色相将围绕该角度旋转，例如，360deg 将不起作用。此角度可以具有 deg 或 rad 单位。
  • invert：反转 View 中的颜色。接受非负数或百分比，其中 1 或 100% 表示完全反转。
  • sepia：将 View 转换为棕褐色。接受非负数或百分比，其中 1 或 100% 表示完全棕褐色。
  • saturate：更改 View 的饱和度。接受非负数或百分比。
注意

blur 和 dropShadow 仅在 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​

类型
number

outlineColor​

注意

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

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

类型
color

outlineOffset​

注意

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

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

类型
number

outlineStyle​

注意

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

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

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

outlineWidth​

注意

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

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

类型
number

pointerEvents​

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

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