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