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

变换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)变换原点决定了元素进行旋转、缩放等变换时所围绕的基准点。默认情况下它位于元素的中心。实际案例演示importReactfromreact;import{SafeAreaView,ScrollView,StyleSheet,Text,View}fromreact-native;constApp()(SafeAreaView style{styles.container}ScrollView contentContainerStyle{styles.scrollContentContainer}View style{styles.box}Text style{styles.text}Original Object/Text/ViewView style{[styles.box,{transform:[{scale:2}],},]}Text style{styles.text}Scale by2/Text/ViewView style{[styles.box,{transform:[{scaleX:2}],},]}Text style{styles.text}ScaleX by2/Text/ViewView style{[styles.box,{transform:[{scaleY:2}],},]}Text style{styles.text}ScaleY by2/Text/ViewView style{[styles.box,{transform:[{rotate:45deg}],},]}Text style{styles.text}Rotate by45deg/Text/ViewView style{[styles.box,{transform:[{rotateX:45deg},{rotateZ:45deg}],},]}Text style{styles.text}RotateXZby45deg/Text/ViewView style{[styles.box,{transform:[{rotateY:45deg},{rotateZ:45deg}],},]}Text style{styles.text}RotateYZby45deg/Text/ViewView style{[styles.box,{transform:[{skewX:45deg}],},]}Text style{styles.text}SkewX by45deg/Text/ViewView style{[styles.box,{transform:[{skewY:45deg}],},]}Text style{styles.text}SkewY by45deg/Text/ViewView style{[styles.box,{transform:[{skewX:30deg},{skewY:30deg}],},]}Text style{styles.text}SkewXYby30deg/Text/ViewView style{[styles.box,{transform:[{translateX:-50}],},]}Text style{styles.text}TranslateX by-50/Text/ViewView style{[styles.box,{transform:[{translateY:50}],},]}Text style{styles.text}TranslateY by50/Text/View/ScrollView/SafeAreaView);conststylesStyleSheet.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,},});exportdefaultApp;这段代码是一个React Native应用主要功能是展示各种2D变换效果。它通过多个View组件每个都应用了不同的transform样式来演示CSS变换属性在移动端的效果。代码以App函数组件作为入口点返回一个SafeAreaView作为根容器。内部包含一个ScrollView确保在内容超出屏幕时用户可以滚动查看所有变换示例。每个变换视图都基于相同的box样式通过style数组语法在基础样式上叠加transform属性。这些变换包括整体缩放使用scale属性将元素放大2倍轴向缩放分别使用scaleX和scaleY进行水平或垂直方向的缩放平面旋转使用rotate在2D平面内旋转45度3D旋转通过rotateX、rotateY、rotateZ实现在三维空间中的旋转效果倾斜变换通过skewX和skewY实现元素的斜切变形平移变换使用translateX和translateY在X轴和Y轴上移动元素位置样式系统通过StyleSheet.create定义container设置flex布局scrollContentContainer控制滚动内容的居中对齐和底部内边距box定义了基础的方形样式和布局属性text则设置了文本的样式。整个应用的结构清晰通过展示各种变换效果帮助开发者理解和学习React Native中的变换属性应用。由于使用了ScrollView即使变换后的元素尺寸变大或位置偏移用户仍然可以通过滚动完整查看所有示例。想要尝试组合这些变换效果吗比如同时缩放和旋转只需在transform数组中添加多个变换对象即可。打包接下来通过打包命令npn run harmony将reactNative的代码打包成为bundle这样可以进行在开源鸿蒙OpenHarmony中进行使用。最后运行效果图如下显示欢迎大家加入开源鸿蒙跨平台开发者社区一起共建开源鸿蒙跨平台生态。