React Native 之 View 组件的变形
在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 (
Welcome to React Native!
Welcome to React Native!
Welcome to React Native!
Welcome to React Native!
Welcome to React Native!
Welcome to React Native!
Welcome to React Native!
Welcome to React Native!
Welcome to React Native!
Welcome to React Native!
Welcome to React Native!
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent:"center",
alignItems:"center",
backgroundColor:"#F5FCFF",
},
welcome0:{
flex:1,
justifyContent:"center",
alignItems:"center",
color:"green",
transform:[{rotate:'45deg'}] //不指定轴旋转
},
welcome1:{
flex:1,
justifyContent:"center",
alignItems:"center",
color:"yellow",
transform:[{rotateX:'45deg'}] //指定X轴旋转
},
welcome2:{
flex:1,
justifyContent:"center",
alignItems:"center",
color:"red",
transform:[{rotateY:'45deg'}] //指定Y轴旋转
},
welcome3:{
flex:1,
justifyContent:"center",
alignItems:"center",
color:"plum",
transform:[{rotateZ:'45deg'}] //指定Z轴旋转
},
welcome4:{
flex:1,
justifyContent:"center",
alignItems:"center",
color:"blue",
transform:[{scale:2}] //X Y 轴都放大
},
welcome5:{
flex:1,
justifyContent:"center",
alignItems:"center",
color:"hotpink",
transform:[{scaleX:2}] //X 轴放大
},
welcome6:{
flex:1,
justifyContent:"center",
alignItems:"center",
color:"deepskyblue",
transform:[{scaleY:2}] //Y 轴放大
},
welcome7:{
flex:1,
justifyContent:"center",
alignItems:"center",
color:"thistle",
transform:[{translateX:200}]//X 轴平移
},
welcome8:{
flex:1,
justifyContent:"center",
alignItems:"center",
color:"darkblue",
transform:[{translateY:150}]//Y 轴平移
},
welcome9:{
flex:1,
justifyContent:"center",
alignItems:"center",
color:"darkcyan",
transform:[{skewX:'45deg'}] // X 轴倾斜
},
welcome10:{
flex:1,
justifyContent:"center",
alignItems:"center",
color:"lightgreen",
transform:[{skewY:'45deg'}]// Y 轴倾斜
}
});
AppRegistry.registerComponent('ViewProject', () => ViewProject);
在开发中，可以多种变形效果叠加：
transform:[{scale:2},{skewY:'45deg'}] // X Y 轴都放大 且Y轴倾斜
旋转与倾斜的区别：rotate控制目标整体旋转，与目标内部形状无关，目标内部不发生任何形变，而skew目标内部的形状会倾斜而改变。