返回 导航

React / React Native

hangge.com

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

作者：hangge | 2017-08-30 08:10
在 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轴倾斜
评论

全部评论（0）

回到顶部