在React Native 开发中,开发者可以利用transfor 样式键 设置 实现组件的变形,从而实现文字或图像的变形。变形包括:translate(平移)、scale(缩放)、rotate(旋转)、skew(倾斜)四种类型。
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React,{ Component } from 'react'; import { AppRegistry,StyleSheet,Text,View } from 'react-native'; export default class ViewProject extends Component { render() { return ( <View style={styles.container}> <Text style={styles.welcome0}> Welcome to React Native! </Text> <Text style={styles.welcome1}> Welcome to React Native! </Text> <Text style={styles.welcome2}> Welcome to React Native! </Text> <Text style={styles.welcome3}> Welcome to React Native! </Text> <Text style={styles.welcome4}> Welcome to React Native! </Text> <Text style={styles.welcome5}> Welcome to React Native! </Text> <Text style={styles.welcome6}> Welcome to React Native! </Text> <Text style={styles.welcome7}> Welcome to React Native! </Text> <Text style={styles.welcome8}> Welcome to React Native! </Text> <Text style={styles.welcome9}> Welcome to React Native! </Text> <Text style={styles.welcome10}> Welcome to React Native! </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,justifyContent:"center",alignItems:"center",backgroundColor:"#F5FCFF",},welcome0:{ flex:1,color:"green",transform:[{rotate:'45deg'}] //不指定轴旋转 },welcome1:{ flex:1,color:"yellow",transform:[{rotateX:'45deg'}] //指定X轴旋转 },welcome2:{ flex:1,color:"red",transform:[{rotateY:'45deg'}] //指定Y轴旋转 },welcome3:{ flex:1,color:"plum",transform:[{rotateZ:'45deg'}] //指定Z轴旋转 },welcome4:{ flex:1,color:"blue",transform:[{scale:2}] //X Y 轴都放大 },welcome5:{ flex:1,color:"hotpink",transform:[{scaleX:2}] //X 轴放大 },welcome6:{ flex:1,color:"deepskyblue",transform:[{scaleY:2}] //Y 轴放大 },welcome7:{ flex:1,color:"thistle",transform:[{translateX:200}]//X 轴平移 },welcome8:{ flex:1,color:"darkblue",transform:[{translateY:150}]//Y 轴平移 },welcome9:{ flex:1,color:"darkcyan",transform:[{skewX:'45deg'}] // X 轴倾斜 },welcome10:{ flex:1,color:"lightgreen",transform:[{skewY:'45deg'}]// Y 轴倾斜 } }); AppRegistry.registerComponent('ViewProject',() => ViewProject);
在开发中,可以多种变形效果叠加:
transform:[{scale:2},{skewY:'45deg'}] // X Y 轴都放大 且Y轴倾斜
旋转与倾斜的区别:rotate控制目标整体旋转,与目标内部形状无关,目标内部不发生任何形变,而skew目标内部的形状会倾斜而改变。
原文链接:https://www.f2er.com/react/304465.html