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 (
<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,
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目标内部的形状会倾斜而改变。