React Native 之 View 组件的变形

前端之家收集整理的这篇文章主要介绍了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目标内部的形状会倾斜而改变。

原文链接:https://www.f2er.com/react/304465.html

猜你在找的React相关文章