Skip to main content

视图样式属性

示例​

¥Example

参考

¥Reference

属性​

¥Props

backfaceVisibility​

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

backgroundColor​

类型
color

borderBottomColor​

类型
color

borderBlockColor​

类型
color

borderBlockEndColor​

类型
color

borderBlockStartColor​

类型
color

borderBottomEndRadius​

类型
数字，字符串（百分比值）

borderBottomLeftRadius​

类型
数字，字符串（百分比值）

borderBottomRightRadius​

类型
数字，字符串（百分比值）

borderBottomStartRadius​

类型
数字，字符串（百分比值）

borderStartEndRadius​

类型
数字，字符串（百分比值）

borderStartStartRadius​

类型
数字，字符串（百分比值）

borderEndEndRadius​

类型
数字，字符串（百分比值）

borderEndStartRadius​

类型
数字，字符串（百分比值）

borderBottomWidth​

类型
number

borderColor​

类型
color

borderCurve
iOS
​

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

¥On iOS 13+, it is possible to change the corner curve of borders.

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

borderEndColor​

类型
color

borderLeftColor​

类型
color

borderLeftWidth​

类型
number

borderRadius​

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

¥If the rounded border is not visible, try applying overflow: 'hidden' as well.

类型
数字，字符串（百分比值）

borderRightColor​

类型
color

borderRightWidth​

类型
number

borderStartColor​

类型
color

borderStyle​

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

borderTopColor​

类型
color

borderTopEndRadius​

类型
数字，字符串（百分比值）

borderTopLeftRadius​

类型
数字，字符串（百分比值）

borderTopRightRadius​

类型
数字，字符串（百分比值）

borderTopStartRadius​

类型
数字，字符串（百分比值）

borderTopWidth​

类型
数字，字符串（百分比值）

borderWidth​

类型
number

boxShadow​

注意

boxShadow 仅在 新架构 上可用。仅在 A​​ndroid 9+ 上支持 Outset 阴影。插入阴影仅在 Android 10+ 上受支持。

¥boxShadow is only available on the New Architecture. Outset shadows are only supported on Android 9+. Inset shadows are only supported on Android 10+.

为元素添加阴影效果，并能够控制阴影的位置、颜色、大小和模糊度。此阴影出现在元素边框的外部或内部，具体取决于阴影是否嵌入。这是 同名的 Web 样式属性 的符合规范的实现。阅读有关 BoxShadowValue 文档中所有可用参数的更多信息。

¥Adds a shadow effect to an element, with the ability to control the position, color, size, and blurriness of the shadow. This shadow either appears around the outside or inside of the border box of the element, depending on whether or not the shadow is inset. This is a spec-compliant implementation of the web style prop of the same name. Read more about all the arguments available in the BoxShadowValue documentation.

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

¥These shadows can be composed together so that a single boxShadow can be comprised of multiple different shadows.

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

¥boxShadow takes either a string which mimics the web syntax or an array of BoxShadowValue objects.

类型
BoxShadowValue 对象数组 | 字符串

cursor
iOS
​

在 iOS 17+ 上，设置为 pointer 允许在指针（例如 iOS 上的触控板或触控笔，或 visionOS 上的用户注视）位于视图上方时实现悬停效果。

¥On iOS 17+, Setting to pointer allows hover effects when a pointer (such as a trackpad or stylus on iOS, or the users' gaze on visionOS) is over the view.

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

elevation
Android
​

使用 Android 的底层 高程 API 设置视图的高度。这会向项目添加阴影并影响重叠视图的 z 顺序。仅在 Android 5.0+ 上受支持，对早期版本没有影响。

¥Sets the elevation of a view, using Android's underlying elevation API. This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions.

类型
number

filter​

注意

filter 仅在 新架构 上可用

¥filter is only available on the New Architecture

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

¥Adds a graphical filter to the View. This filter is comprised of any number of filter functions, which each represent some atomic change to the graphical composition of the View. The complete list of valid filter functions is defined below. filter will apply to descendants of the View as well as the View itself. filter implies overflow: hidden, so descendants will be clipped to fit the bounds of the View.

以下过滤函数适用于所有平台：

¥The following filter functions work across all platforms:

  • brightness：更改 View 的亮度。采用非负数或百分比。

    ¥brightness: Changes the brightness of the View. Takes a non-negative number or percentage.

  • opacity：更改 View 的不透明度或 alpha。采用非负数或百分比。

    ¥opacity: Changes the opacity, or alpha, of the View. Takes a non-negative number or percentage.

注意

由于性能和规范合规性问题，这是 iOS 上唯一可用的两个过滤功能。计划探索使用 SwiftUI 而不是 UIKit 来实现此实现的一些潜在解决方法。

¥Due to issues with performance and spec compliance, these are the only two filter functions available on iOS. There are plans to explore some potential workarounds using SwiftUI instead of UIKit for this implementation.

安卓

以下过滤函数仅适用于 Android：

¥The following filter functions work on Android only:

  • blur：使用 高斯模糊 模糊 View，其中指定的长度代表模糊算法中使用的半径。任何非负 DIP 值均有效（无百分比）。值越大，结果越模糊。

    ¥blur: Blurs the View with a Guassian blur, where the specified length represents the radius used in the blurring algorithm. Any non-negative DIP value is valid (no percents). The larger the value, the blurrier the result.

  • contrast：更改 View 的对比度。采用非负数或百分比。

    ¥contrast: Changes the contrast of the View. Takes a non-negative number or percentage.

  • dropShadow：在 View 的 alpha 蒙版周围添加阴影（只有 View 中的非零 alpha 像素才会投射阴影）。采用表示阴影颜色的可选颜色以及 2 或 3 个长度。如果指定了 2 个长度，则它们将被解释为 offsetX 和 offsetY，这将分别在 X 和 Y 维度上平移阴影。如果给出了第三个长度，则将其解释为阴影上使用的高斯模糊的标准偏差 - 因此，值越大，阴影越模糊。阅读有关 DropShadowValue 中参数的更多信息。

    ¥dropShadow: Adds a shadow around the alpha mask of the View (only non-zero alpha pixels in the View will cast a shadow). Takes an optional color representing the shadow color, and 2 or 3 lengths. If 2 lengths are specified they are interperted as offsetX and offsetY which will translate the shadow in the X and Y dimensions respectfully. If a 3rd length is given it is interpreted as the standard deviation of the Guassian blur used on the shadow - so a larger value will blur the shadow more. Read more about the arguments in DropShadowValue.

  • grayscale：按指定量将 View 转换为 grayscale。采用非负数或百分比，其中 1 或 100% 代表完全灰度。

    ¥grayscale: Converts the View to grayscale by the specified amount. Takes a non-negative number or percentage, where 1 or 100% represents complete grayscale.

  • hueRotate：更改视图的 hue。此函数的参数定义色轮的角度，色调将围绕该角度旋转，因此例如 360deg 将不起作用。这个角度可以有 deg 或 rad 单位。

    ¥hueRotate: Changes the hue of the View. The argument of this function defines the angle of a color wheel around which the hue will be rotated, so e.g., 360deg would have no effect. This angle can have either deg or rad units.

  • invert：反转 View 中的颜色。采用非负数或百分比，其中 1 或 100% 代表完全反转。

    ¥invert: Inverts the colors in the View. Takes a non-negative number or percentage, where 1 or 100% represents complete inversion.

  • sepia：将 View 转换为 sepia。采用非负数或百分比，其中 1 或 100% 代表完全棕褐色。

    ¥sepia: Converts the View to sepia. Takes a non-negative number or percentage, where 1 or 100% represents complete sepia.

  • saturate：更改 View 的 saturation。采用非负数或百分比。

    ¥saturate: Changes the saturation of the View. Takes a non-negative number or percentage.

注意

blur 和 dropShadow 仅在 Android 12+ 上受支持

¥blur and dropShadow are only supported on Android 12+

filter 要么接受由上述过滤函数组成的对象数组，要么接受模仿 网络语法 的字符串。

¥filter takes either an array of objects comprising of the above filter functions or a string which mimics the web syntax.

类型
对象数组：{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 仅在 新架构 上可用

¥outlineColor is only available on the New Architecture

设置元素轮廓的颜色。详细信息请参见 网络文档。

¥Sets the color of an element's outline. See web documentation for more details.

类型
color

outlineOffset​

注意

outlineOffset 仅在 新架构 上可用

¥outlineOffset is only available on the New Architecture

设置元素轮廓和边界之间的空间量。不影响布局。详细信息请参见 网络文档。

¥Sets the amount of space between an outline and the bounds of an element. Does not affect layout. See web documentation for more details.

类型
number

outlineStyle​

注意

outlineStyle 仅在 新架构 上可用

¥outlineStyle is only available on the New Architecture

设置元素轮廓的样式。详细信息请参见 网络文档。

¥Sets the style of an element's outline. See web documentation for more details.

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

outlineWidth​

注意

outlineWidth 仅在 新架构 上可用

¥outlineWidth is only available on the New Architecture

在元素周围绘制的轮廓的宽度，在边框之外。不影响布局。详细信息请参见 网络文档。

¥The width of an outline which is drawn around an element, outside the border. Does not affect layout. See web documentation for more details.

类型
number

pointerEvents​

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

¥Controls whether the View can be the target of touch events.

  • 'auto'：View 可以是触摸事件的目标。

    ¥'auto': The View can be the target of touch events.

  • 'none'：视图永远不是触摸事件的目标。

    ¥'none': The View is never the target of touch events.

  • 'box-none'：View 永远不是触摸事件的目标，但它的子视图可以。

    ¥'box-none': The View is never the target of touch events but its subviews can be.

  • 'box-only'：视图可以是触摸事件的目标，但其子视图不能。

    ¥'box-only': The view can be the target of touch events but its subviews cannot be.

类型
enum('auto', 'box-none', 'box-only', 'none' )