版本：0.83

视图样式属性

示例

参考

属性

`backfaceVisibility`

类型
枚举 (`'visible'`, `'hidden'`)

`backgroundColor`

类型
颜色

`borderBottomColor`

类型
颜色

`borderBlockColor`

类型
颜色

`borderBlockEndColor`

类型
颜色

`borderBlockStartColor`

类型
颜色

`borderBottomEndRadius`

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

`borderBottomLeftRadius`

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

`borderBottomRightRadius`

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

`borderBottomStartRadius`

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

`borderStartEndRadius`

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

`borderStartStartRadius`

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

`borderEndEndRadius`

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

`borderEndStartRadius`

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

`borderBottomWidth`

类型
数字

`borderColor`

类型
颜色

`borderCurve`
iOS

在 iOS 13 及以上版本中，可以改变边框的圆角曲线。

类型
枚举 (`'circular'`, `'continuous'`)

`borderEndColor`

类型
颜色

`borderLeftColor`

类型
颜色

`borderLeftWidth`

类型
数字

`borderRadius`

如果圆角边框未显示，尝试同时设置 overflow: 'hidden'。

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

`borderRightColor`

类型
颜色

`borderRightWidth`

类型
数字

`borderStartColor`

类型
颜色

`borderStyle`

类型
枚举 (`'solid'`, `'dotted'`, `'dashed'`)

`borderTopColor`

类型
颜色

`borderTopEndRadius`

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

`borderTopLeftRadius`

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

`borderTopRightRadius`

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

`borderTopStartRadius`

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

`borderTopWidth`

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

`borderWidth`

类型
数字

`boxShadow`

备注

boxShadow 仅在新架构中可用。外部阴影仅支持 Android 9 及以上，内部阴影仅支持 Android 10 及以上。

为元素添加阴影效果，可以控制阴影的位置、颜色、大小和模糊度。该阴影出现在元素边框盒子的外侧或内侧，取决于阴影是否为 内部阴影 (inset)。这是对同名 Web 样式属性的规范兼容实现。更多参数详见 BoxShadowValue 文档。

这些阴影可组合使用，一个 boxShadow 可以由多个不同的阴影组成。

boxShadow 接受一个模拟 Web 语法的字符串，或一个由 BoxShadowValue 对象组成的数组。

类型
BoxShadowValue 对象数组 \| 字符串

`cursor`
iOS

在 iOS 17 及以上版本，将其设置为 pointer，可以在有指针 (比如 iOS 上的触控板、手写笔，或者 visionOS 中用户的视线) 悬停时显示悬停效果。

类型
枚举 (`'auto'`, `'pointer'`)

`elevation`
Android

设置视图的海拔高度，使用 Android 的底层 elevation API。这会为元素添加阴影，并影响重叠视图的 z 轴排序。仅支持 Android 5.0 以上版本，较早版本无效。

类型
数字

`experimental_backgroundImage`

实验性 🧪

此 API 属于实验性质。 实验性 API 可能包含错误，并且在未来的 React Native 版本中可能会发生变化。请勿在生产环境中使用它们。

experimental_backgroundImage provides the ability to draw a linear-gradient() (0.76.x+) and radial-gradient() (0.80.x+) using a web-like syntax.

React TSX
// Simple usage:
<View style={{
  experimental_backgroundImage: 'linear-gradient(45deg, blue, red)'
}} />
<View style={{
  experimental_backgroundImage: 'radial-gradient(ellipse farthest-corner at 30% 40%, red, blue)'
}} />

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

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

`experimental_backgroundPosition`

实验性 🧪

此 API 属于实验性质。 实验性 API 可能包含错误，并且在未来的 React Native 版本中可能会发生变化。请勿在生产环境中使用它们。

控制背景渐变在视图中的位置。设置了 experimental_backgroundImage，并希望偏移或居中渐变而不是填满整个区域时，此属性很有用。

React TSX
<View
  style={{
    experimental_backgroundImage:
      'radial-gradient(circle, #ff6b6b, #4ecdc4)',
    experimental_backgroundPosition: 'center',
    experimental_backgroundRepeat: 'no-repeat',
    experimental_backgroundSize: '50px 50px',
  }}
/>

Type
string \| 对象数组 `{top: string, left: string, right: string, bottom: string}`

`experimental_backgroundRepeat`

实验性 🧪

此 API 属于实验性质。 实验性 API 可能包含错误，并且在未来的 React Native 版本中可能会发生变化。请勿在生产环境中使用它们。

控制是否重复背景渐变以及重复方式。它与 experimental_backgroundImage 配合使用，可让渐变在视图中平铺。

React TSX
<View
  style={{
    experimental_backgroundImage:
      'linear-gradient(45deg, #ff6b6b, #4ecdc4)',
    experimental_backgroundRepeat: 'repeat',
    experimental_backgroundSize: '20px 20px',
  }}
/>

Type
enum(`'repeat'`, `'space'`, `'round'`, `'no-repeat'`) \| 对象数组 `{x: string, y: string}`

`experimental_backgroundSize`

实验性 🧪

此 API 属于实验性质。 实验性 API 可能包含错误，并且在未来的 React Native 版本中可能会发生变化。请勿在生产环境中使用它们。

控制背景渐变的尺寸。设置了 experimental_backgroundImage 且不希望渐变默认填满整个视图时，此属性最有用。

React TSX
<View
  style={{
    experimental_backgroundImage:
      'linear-gradient(90deg, #a8edea, #fed6e3)',
    experimental_backgroundRepeat: 'no-repeat',
    experimental_backgroundSize: '100px 100px',
  }}
/>

Type
string \| 对象数组 `{x: number, y: number}`

`filter`

备注

filter 仅在新架构中可用

向 View 添加图形滤镜。滤镜由若干 滤镜函数 组成，每一个代表对 View 图形组成的原子改变。完整的有效滤镜函数列表如下。filter 也会应用于 View 的子孙元素。filter 等同于设置了 overflow: 'hidden'，所以子孙元素会被限制在 View 的边界内。

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

brightness：改变 View 的亮度。接受非负数或百分数。
opacity：改变 View 的不透明度（alpha 值）。接受非负数或百分数。

备注

出于性能及规范兼容性考虑，这仅是 iOS 支持的两种滤镜函数。计划探索用 SwiftUI 替代 UIKit 实现的潜在解决方案。

Android

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

blur：使用高斯模糊模糊 View，参数代表模糊半径（无百分比，只接受非负 DIP 值）。值越大模糊越明显。
contrast：改变 View 对比度。接受非负数或百分比。
dropShadow：在 View 的 alpha 遮罩周围添加阴影（仅非零 alpha 像素投射阴影）。接受可选的阴影颜色，以及 2 或 3 个长度参数。2 个参数时分别为 offsetX 和 offsetY，表示阴影在横纵轴的偏移。3 个参数时第三个为用于阴影高斯模糊的标准差，值越大阴影越模糊。详细参数见 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}`，或字符串

`mixBlendMode`

备注

mixBlendMode 仅在新架构和 Android 10 及以上 中可用

控制 View 如何与其 堆叠上下文 中的其他元素颜色混合。完整混合函数说明见 MDN 文档。

如需更细粒度的混合控制，请参见 isolation。

mixBlendMode 取值

normal：元素绘制在背景之上，不做混合。
multiply：用源颜色乘以目标颜色，替代目标。
screen：乘以背景色和源色补色后，再取补色。
overlay：根据背景色值选择乘法或屏幕模式。
darken：选择背景色和源色中较暗者。
lighten：选择背景色和源色中较亮者。
color-dodge：加亮背景颜色以反映源颜色；用黑色绘制无变化。
color-burn：加暗背景颜色以反映源颜色；用白色绘制无变化。
hard-light：根据源颜色值选择乘法或屏幕模式，类似对背景投射强光。
soft-light：根据源颜色值加暗或加亮颜色，类似对背景投射散射光。
difference：从较亮颜色中减去较暗颜色。
exclusion：产生类似 Difference 但对比度较低的效果。
hue：创建具有源色色相、背景色饱和度和明度的新色。
saturation：创建具有源色饱和度、背景色色相和明度的新色。
color：创建具有源色色相和饱和度、背景色明度的新色。保留背景灰度，适合着色单色图像或给彩色图像着色。
luminosity：创建具有源色明度、背景色色相和饱和度的新色。此效果与 Color 模式相反。

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

`opacity`

类型
数字

`outlineColor`

备注

outlineColor 仅在新架构中可用

设置元素轮廓线颜色。详见 Web 文档。

类型
颜色

`outlineOffset`

备注

outlineOffset 仅在新架构中可用

设置轮廓线与元素边界之间的距离，不影响布局。详见 Web 文档。

类型
数字

`outlineStyle`

备注

outlineStyle 仅在新架构中可用

设置元素轮廓线样式。详见 Web 文档。

类型
枚举 (`'solid'`, `'dotted'`, `'dashed'`)

`outlineWidth`

备注

outlineWidth 仅在新架构中可用

绘制元素外围的轮廓宽度，不影响布局。详见 Web 文档。

类型
数字

`pointerEvents`

控制是否允许 View 成为触摸事件目标。

'auto'：View 可以成为触摸事件目标。
'none'：View 永远不会成为触摸事件目标。
'box-none'：View 永远不会成为触摸事件目标，但其子视图可以。
'box-only'：View 可以成为触摸事件目标，但其子视图不可以。

类型
枚举 (`'auto'`, `'box-none'`, `'box-only'`, `'none'` )

示例​

参考

属性​

backfaceVisibility​

backgroundColor​

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​

experimental_backgroundImage​

experimental_backgroundPosition​

experimental_backgroundRepeat​

experimental_backgroundSize​

filter​

mixBlendMode​

mixBlendMode 取值​

opacity​

outlineColor​

outlineOffset​

outlineStyle​

outlineWidth​

pointerEvents​

示例

属性

`backfaceVisibility`

`backgroundColor`

`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

`experimental_backgroundImage`

`experimental_backgroundPosition`

`experimental_backgroundRepeat`

`experimental_backgroundSize`

`filter`

`mixBlendMode`

mixBlendMode 取值

`opacity`

`outlineColor`

`outlineOffset`

`outlineStyle`

`outlineWidth`

`pointerEvents`