View Style Props

示例

参考文档

Props

`backfaceVisibility`

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

`backgroundColor`

类型
color

`backgroundImage`

backgroundImage 提供了使用类似 Web 的语法绘制 linear-gradient() 和 radial-gradient() 的能力。

React TSX
// Simple usage:
<View style={{ backgroundImage: 'linear-gradient(45deg, blue, red)' }} />

<View style={{ backgroundImage: 'radial-gradient(ellipse farthest-corner at 30% 40%, red, blue)' }} />

// Also with PlatformColor:
<View
  style={{
    backgroundImage: [
      {
        type: 'linear-gradient',
        direction: 'to bottom',
        colorStops: [
          {
            color: Platform.select({
              ios: PlatformColor('systemTealColor'),
              android: PlatformColor('@android:color/holo_purple'),
              default: 'blue',
            }),
            positions: ['0%'],
          },
          {color: 'green', positions: ['100%']},
        ],
      },
    ],
  }}
/>

更多复杂用法示例可在 RNTester 应用中找到（支持 PlatformColor）：

类型
string, array of objects: `{type: 'linear-gradient', direction: string, colorStops: object[] }`, `{type: 'radial-gradient', shape: string, position: object, size: string, colorStops: object[] }`

`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 个长度值，分别表示 offsetX 和 offsetY，即阴影在 X 和 Y 方向的偏移量。如果指定第 3 个长度值，则表示高斯模糊的标准差——值越大阴影越模糊。更多参数详情请参阅 DropShadowValue。
grayscale：按指定程度将 View 转换为灰度。接受非负数或百分比，其中 1 或 100% 表示完全灰度。
hueRotate：改变 View 的色相。此函数的参数定义了色相在色轮上旋转的角度，例如 360deg 则没有效果。角度单位可以是 deg 或 rad。
invert：反转 View 中的颜色。接受非负数或百分比，其中 1 或 100% 表示完全反转。
sepia：将 View 转换为棕褐色。接受非负数或百分比，其中 1 或 100% 表示完全棕褐色。
saturate：改变 View 的饱和度。接受非负数或百分比。

note

blur 和 dropShadow 仅支持 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 仅在新架构下可用，且需要 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：使用源颜色的亮度与背景颜色的色相和饱和度创建颜色。产生与 color 模式相反的效果。
plus-lighter：将源和目标颜色通道相加，每个通道限制在最大值。

类型
enum(`'normal'`, `'multiply'`, `'screen'`, `'overlay'`, `'darken'`, `'lighten'`, `'color-dodge'`, `'color-burn'`, `'hard-light'`, `'soft-light'`, `'difference'`, `'exclusion'`, `'hue'`, `'saturation'`, `'color'`, `'luminosity'`, `'plus-lighter'`)

`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'` )

示例​

参考文档

Props​

backfaceVisibility​

backgroundColor​

backgroundImage​

borderBottomColor​

borderBlockColor​

borderBlockEndColor​

borderBlockStartColor​

borderBottomEndRadius​

borderBottomLeftRadius​

borderBottomRightRadius​

borderBottomStartRadius​

borderStartEndRadius​

borderStartStartRadius​

borderEndEndRadius​

borderEndStartRadius​

borderBottomWidth​

borderColor​

borderCurve iOS​

borderEndColor​

borderLeftColor​

borderLeftWidth​

borderRadius​

borderRightColor​

borderRightWidth​

borderStartColor​

borderStyle​

borderTopColor​

borderTopEndRadius​

borderTopLeftRadius​

borderTopRightRadius​

borderTopStartRadius​

borderTopWidth​

borderWidth​

boxShadow​

cursor iOS​

elevation Android​

filter​

mixBlendMode​

mixBlendMode 值​

opacity​

outlineColor​

outlineOffset​

outlineStyle​

outlineWidth​

pointerEvents​

示例

Props

`backfaceVisibility`

`backgroundColor`

`backgroundImage`

`borderBottomColor`

`borderBlockColor`

`borderBlockEndColor`

`borderBlockStartColor`

`borderBottomEndRadius`

`borderBottomLeftRadius`

`borderBottomRightRadius`

`borderBottomStartRadius`

`borderStartEndRadius`

`borderStartStartRadius`

`borderEndEndRadius`

`borderEndStartRadius`

`borderBottomWidth`

`borderColor`

`borderCurve`
iOS

`borderEndColor`

`borderLeftColor`

`borderLeftWidth`

`borderRadius`

`borderRightColor`

`borderRightWidth`

`borderStartColor`

`borderStyle`

`borderTopColor`

`borderTopEndRadius`

`borderTopLeftRadius`

`borderTopRightRadius`

`borderTopStartRadius`

`borderTopWidth`

`borderWidth`

`boxShadow`

`cursor`
iOS

`elevation`
Android

`filter`

`mixBlendMode`

mixBlendMode 值

`opacity`

`outlineColor`

`outlineOffset`

`outlineStyle`

`outlineWidth`

`pointerEvents`