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