React Native - transform样式的使用详解（平移、缩放、旋转、倾斜等图形变换）

2017-08-30 发布：hangge 阅读：42366

在 React Native 开发中，我们可以通过 transform 样式的设置来实现组件（包括文字、图像）的变形。

一、四种变形样式

1，平移（translate）

translateX：沿 x 轴方向平移
translateY：沿 y 轴方向平移

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 View,
 Text,
} from 'react-native';

class Main extends Component {
   render() {
     return (
       <View style={styles.flex}>
         <Text>欢迎访问 hangge.com</Text>
         <Text style={styles.t1}>欢迎访问 hangge.com</Text>
         <Text style={styles.t2}>欢迎访问 hangge.com</Text>
       </View>
     );
   }
}

const styles = StyleSheet.create({
  flex:{
     flex:1,
     padding:35
  },
  t1: {
    transform: [{translateX:100}]
  },
  t2: {
    transform: [{translateY:50}]
  }
});

AppRegistry.registerComponent('HelloWorld', () => Main);

2，缩放（scale）

scaleX：沿 x 轴方向放大
scaleY：沿 y 轴方向放大
scale：沿 x、y 轴方向都放大

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 View,
 Text,
} from 'react-native';

class Main extends Component {
   render() {
     return (
       <View style={styles.flex}>
         <Text>欢迎访问 hangge.com</Text>
         <Text style={styles.t1}>欢迎访问 hangge.com</Text>
         <Text style={styles.t2}>欢迎访问 hangge.com</Text>
         <Text style={styles.t3}>欢迎访问 hangge.com</Text>
       </View>
     );
   }
}

const styles = StyleSheet.create({
  flex:{
     flex:1,
     alignItems: 'center'
  },
  t1: {
    transform: [{scaleX:2}]
  },
  t2: {
    transform: [{scaleY:2}]
  },
  t3: {
    transform: [{scale:2}]
  }
});

AppRegistry.registerComponent('HelloWorld', () => Main);

3，旋转（rotate）

rotateX：沿 x 轴旋转
rotateY：沿 y 轴旋转
rotateZ：沿 z 轴旋转
rotate：不指定轴旋转

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 View,
 Text,
} from 'react-native';

class Main extends Component {
   render() {
     return (
       <View style={styles.flex}>
         <Text>欢迎访问 hangge.com</Text>
         <Text style={styles.t1}>欢迎访问 hangge.com</Text>
         <Text style={styles.t2}>欢迎访问 hangge.com</Text>
         <Text style={styles.t3}>欢迎访问 hangge.com</Text>
         <Text style={styles.t4}>欢迎访问 hangge.com</Text>
       </View>
     );
   }
}

const styles = StyleSheet.create({
  flex:{
     flex:1,
     alignItems: 'center'
  },
  t1: {
    transform: [{rotateX:'45deg'}]
  },
  t2: {
    transform: [{rotateY:'45deg'}]
  },
  t3: {
    transform: [{rotateZ:'45deg'}]
  },
  t4: {
    transform: [{rotate:'45deg'}]
  }
});

AppRegistry.registerComponent('HelloWorld', () => Main);

4，倾斜（skew）

skewX：沿 x 轴方向倾斜
skewY：沿 y 轴方向倾斜

import React, { Component } from 'react';
import {
 AppRegistry,
 StyleSheet,
 View,
 Text,
} from 'react-native';

class Main extends Component {
   render() {
     return (
       <View style={styles.flex}>
         <Text>欢迎访问 hangge.com</Text>
         <Text style={styles.t1}>欢迎访问 hangge.com</Text>
         <Text style={styles.t2}>欢迎访问 hangge.com</Text>
       </View>
     );
   }
}

const styles = StyleSheet.create({
  flex:{
     flex:1,
     alignItems: 'center'
  },
  t1: {
    transform: [{skewX:'45deg'}]
  },
  t2: {
    transform: [{skewY:'45deg'}]
  }
});

AppRegistry.registerComponent('HelloWorld', () => Main);

旋转与倾斜的区别：

rotate 控制目标整体旋转，与目标内部形状无关，目标内部不发生任何形变。

skew 目标内部的形状会随倾斜而改变。

二、组合式样多种形变样式

上面的代码中我们每个组件只使用一种形变效果。而在实际开发时，可以同时叠加使用多种形变效果。

transform: [{scale:2}, {rotateY:'45deg'}] //x,y轴都放大并且y轴倾斜