0 基础入门React Native鸿蒙跨平台开发：Transform使用 2D 或 3D 变换修改组件的外观和位置

2301_79516720

419人浏览 · 2025-12-04 17:36:13

2301_79516720 · 2025-12-04 17:36:13 发布

变换（Transform）

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

好的，React Native 中的 Transform 是一个强大的功能，允许你对视图（View）进行旋转、缩放、倾斜、平移等视觉变换。下面将结合官方文档和社区实践，为你提供一份详细的说明。

核心概念：transform 属性

transform 属性接受一个数组，数组中的每个元素是一个描述特定变换的对象。

<View style={{
  transform: [
    { rotateX: '45deg' },
    { scale: 1.5 },
    { translateX: 100 }
  ]
}} />

主要的变换类型

以下是常用的变换属性及其用法：

平移 (Translation)
- translateX: 沿 X 轴（水平方向）平移。正值向右，负值向左。
- translateY: 沿 Y 轴（垂直方向）平移。正值向下，负值向上。
- translate: 同时指定 X、Y、Z 轴的平移。Z 轴平移在 2D 界面中通常不产生视觉效果。
- 示例:
```
transform: [{ translateX: 50 }] // 向右平移 50px
transform: [{ translateY: -30 }] // 向上平移 30px
transform: [{ translate: [100, 50, 0] }] // 右移100px，下移50px
```
缩放 (Scaling)
- scaleX: 沿 X 轴缩放宽度。值大于 1 放大，小于 1 缩小。
- scaleY: 沿 Y 轴缩放高度。
- scale: 同时沿 X 和 Y 轴缩放。
- 注意：值为负数时，会以元素中心为基准进行镜像翻转。
- 示例:
```
transform: [{ scaleX: 2 }] // 宽度放大为原来的2倍
transform: [{ scale: 0.5 }] // 宽高都缩小为原来的一半
```
旋转 (Rotation)
- rotateX, rotateY, rotateZ: 分别绕 X、Y、Z 轴旋转。rotateZ 是最常见的，用于在屏幕平面内旋转。
- 重要：旋转值必须是一个字符串，并且需要指定单位，如 '45deg'（度）或 '0.785398rad'（弧度）。
- 旋转方向：在 React Native 中，rotateZ 的正值通常表示顺时针旋转，负值表示逆时针旋转。
- 示例:
```
transform: [{ rotateZ: '45deg' }] // 顺时针旋转45度
transform: [{ rotateX: '30deg' }] // 绕X轴旋转30度
```
倾斜 (Skewing)
- skewX: 沿 X 轴倾斜。参数是倾斜的角度（如 '30deg'）。
- skewY: 沿 Y 轴倾斜。
- 注意：倾斜会改变元素内部像素的形状，与旋转（仅改变整体方向）不同。
- 示例:
```
transform: [{ skewX: '30deg' }] // X轴方向倾斜30度
```
透视 (Perspective)
- perspective: 为子元素设置透视距离，用于创建 3D 效果。值越大，透视效果越弱。
- 注意：在 React Native 的当前实现中，此属性可能不会产生预期的 3D 效果，主要用于兼容性或未来的 3D 支持。

高级特性：变换原点 (Transform Origin)

变换原点决定了元素进行旋转、缩放等变换时所围绕的基准点。默认情况下，它位于元素的中心。

实际案例演示：

import React from 'react';
import {SafeAreaView, ScrollView, StyleSheet, Text, View} from 'react-native';

const App = () => (
  <SafeAreaView style={styles.container}>
    <ScrollView contentContainerStyle={styles.scrollContentContainer}>
      <View style={styles.box}>
        <Text style={styles.text}>Original Object</Text>
      </View>

      <View
        style={[
          styles.box,
          {
            transform: [{scale: 2}],
          },
        ]}>
        <Text style={styles.text}>Scale by 2</Text>
      </View>

      <View
        style={[
          styles.box,
          {
            transform: [{scaleX: 2}],
          },
        ]}>
        <Text style={styles.text}>ScaleX by 2</Text>
      </View>

      <View
        style={[
          styles.box,
          {
            transform: [{scaleY: 2}],
          },
        ]}>
        <Text style={styles.text}>ScaleY by 2</Text>
      </View>

      <View
        style={[
          styles.box,
          {
            transform: [{rotate: '45deg'}],
          },
        ]}>
        <Text style={styles.text}>Rotate by 45 deg</Text>
      </View>

      <View
        style={[
          styles.box,
          {
            transform: [{rotateX: '45deg'}, {rotateZ: '45deg'}],
          },
        ]}>
        <Text style={styles.text}>Rotate X&Z by 45 deg</Text>
      </View>

      <View
        style={[
          styles.box,
          {
            transform: [{rotateY: '45deg'}, {rotateZ: '45deg'}],
          },
        ]}>
        <Text style={styles.text}>Rotate Y&Z by 45 deg</Text>
      </View>

      <View
        style={[
          styles.box,
          {
            transform: [{skewX: '45deg'}],
          },
        ]}>
        <Text style={styles.text}>SkewX by 45 deg</Text>
      </View>

      <View
        style={[
          styles.box,
          {
            transform: [{skewY: '45deg'}],
          },
        ]}>
        <Text style={styles.text}>SkewY by 45 deg</Text>
      </View>

      <View
        style={[
          styles.box,
          {
            transform: [{skewX: '30deg'}, {skewY: '30deg'}],
          },
        ]}>
        <Text style={styles.text}>Skew X&Y by 30 deg</Text>
      </View>

      <View
        style={[
          styles.box,
          {
            transform: [{translateX: -50}],
          },
        ]}>
        <Text style={styles.text}>TranslateX by -50 </Text>
      </View>

      <View
        style={[
          styles.box,
          {
            transform: [{translateY: 50}],
          },
        ]}>
        <Text style={styles.text}>TranslateY by 50 </Text>
      </View>
    </ScrollView>
  </SafeAreaView>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollContentContainer: {
    alignItems: 'center',
    paddingBottom: 60,
  },
  box: {
    height: 100,
    width: 100,
    borderRadius: 5,
    marginVertical: 40,
    backgroundColor: '#61dafb',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 14,
    fontWeight: 'bold',
    margin: 8,
    color: '#000',
    textAlign: 'center',
  },
});

export default App;