跳到主要内容
新架构实战课 实操 + 基建 + 原理全维度包揽,抢先掌握 React Native 新架构精髓 立即查看 >Version: Next

变换(Transform)

变换(Transform)是样式属性,可帮助您使用 2D 或 3D 变换修改组件的外观和位置。然而,即便使用了变换,使用变换的组件的布局并不会变化,因此可能会与附近的组件重叠。您可以对变换的组件、附近的组件应用边距,或对容器应用填充,以防止这种重叠。

示例


文档

Transform

transform接受一组变换对象或以空格分隔的字符串值。每个对象都指定将作为键进行变换的属性,以及在变换中使用的值。不应组合对象。每个对象使用单个键/值对。

旋转变换需要一个字符串,以便可以用度(deg)或弧度(rad)表示变换。例如:

{
transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}],
}

同样的效果也可以通过使用以空格分隔的字符串来实现:

{
transform: 'rotateX(45deg) rotateZ(0.785398rad)',
}

斜向变换需要一个字符串,以便可以用度数(度)表示变换。例如:

{
transform: [{skewX: '45deg'}],
}
TypeRequired
array of objects: {matrix: number[]}, {perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string} or stringNo

decomposedMatrix, rotation, scaleX, scaleY, transformMatrix, translateX, translateY

Deprecated. Use the transform prop instead.

Transform Origin

transformOrigin 属性设置视图变换的原点。变换原点是应用变换的点。默认情况下,变换的原点是 center

示例

Values

变换原点支持 px百分比 和关键词 topleftrightbottomcenter 的值。

transformOrigin 属性可以使用一个、两个或三个值进行指定,其中每个值表示一个偏移。

仅设置一个值:

  • 值必须是px百分比或关键词leftcenterrighttopbottom之一。
{
transformOrigin: '20px',
transformOrigin: 'bottom',
}

同时设置两个值:

  • 第一个值(x 偏移)必须是px百分比或关键词leftcenterright之一。
  • 第二个值(y 偏移)必须是px百分比或关键词topcenterbottom之一。
{
transformOrigin: '10px 2px',
transformOrigin: 'left top',
transformOrigin: 'top right',
}

同时设置三个值:

  • 第一和第二个值与两值语法相同。
  • 第三个值(z 偏移)必须是px。它始终表示 Z 偏移。
{
transformOrigin: '2px 30% 10px',
transformOrigin: 'right bottom 20px',
}

数组语法

transformOrigin 还支持数组语法。这使得在使用动画 API 时更加方便。它还避免了字符串解析,因此应该更加高效。

{
// 可以仅使用数值
transformOrigin: [10, 30, 40],
// 也可以混合使用数值和百分数
transformOrigin: [10, '20%', 0],
}

你可以参考 MDN 的关于 Transform origin 的指南获取额外信息。