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

在 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 (

欢迎访问 hangge.com

欢迎访问 hangge.com

欢迎访问 hangge.com

);

}

}

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 (

欢迎访问 hangge.com

欢迎访问 hangge.com

欢迎访问 hangge.com

欢迎访问 hangge.com

);

}

}

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 (

欢迎访问 hangge.com

欢迎访问 hangge.com

欢迎访问 hangge.com

欢迎访问 hangge.com

欢迎访问 hangge.com

);

}

}

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 (

欢迎访问 hangge.com

欢迎访问 hangge.com

欢迎访问 hangge.com

);

}

}

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轴倾斜