react-native支持transform-origin探索

栏目: IOS · Android · 发布时间: 6年前

内容简介:最近我在项目中用到了react-native,当使用view根据屏幕自适应缩放功能的时候,我用到了自己熟悉的css transform,当想指定中线点缩放的时候,发现react-native不支持transform-origin,可能官方后面会支持吧,目前用下来还是不支持的。 报了如下错误:react-native使用了阉割版的css,不是所有的css属性都支持的,默认是不支持transform-origin的,项目中真的要用怎么办? 查阅了react-native官方issue

前言

最近我在项目中用到了react-native,当使用view根据屏幕自适应缩放功能的时候,我用到了自己熟悉的css transform,当想指定中线点缩放的时候,发现react-native不支持transform-origin,可能官方后面会支持吧,目前用下来还是不支持的。 报了如下错误:

react-native支持transform-origin探索

react-native使用了阉割版的css,不是所有的css属性都支持的,默认是不支持transform-origin的,项目中真的要用怎么办? 查阅了react-native官方issue transform-origin support 然并没有找到我需要的解决方案。

探索我的项目

我用的是缩放,大体分析如下图:

react-native支持transform-origin探索

因此,我trasnform scale之后,我再增加一个transformX 和transformY就可以了

代码如下:

let transformx=haoroomsViewWidth*(1-scaleRadio),transformy=haoroomsViewHeight*(1-scaleRadio)
transform: [{scale(scaleRadio)},{translateX:-transformx},{translateY:-transformy}]

关于旋转

关于transForm旋转rotate的中心点定位就麻烦一些了。当然网上有些用transformMatrix的方式。我这里也提供了一种方式, 思路和我上面一样,

rad = angle * Math.PI / 180
transformX(Math.cos(angle) * haoroomsx - Math.sin(angle) * haoroomsy)
transformY(Math.sin(angle) * haoroomsx + Math.cos(angle) * haoroomsy)
rotate(angle+"deg")

源码如下:仅供参考:

import { responsiveHeight, responsiveWidth, responsiveFontSize } from 'react-native-responsive-dimensions';
import BackgroundTimer from 'react-native-background-timer';

class Haorooms extend component{
constructor(props) {
     super(props)
     this.state = {
          angle: 0
     }
}

componentDidMount() {
    this.progress()
}

progress(){
     intervalId = BackgroundTimer.setInterval(() => {      
         this.setState({angle: this.state.angle +1})   
     }, (1000); // 1000 milliseconds
}



render () {
        const dx = responsiveHeight(9.5);
        const dy = responsiveHeight(9.5);

        const position= {
            transform: [
              {
                translateX: Math.cos((360 - this.state.angle)  * Math.PI / 180) * dx - Math.sin((360 - this.state.angle) * Math.PI / 180) * dy
              },
              {
                translateY:  Math.sin((360 - this.state.angle)  * Math.PI / 180) * dx + Math.cos((360 - this.state.angle) * Math.PI / 180) * dy
              }
            ]
          };

        return(
            <Animated.View style={position}>
                <Text>Text move</Text>
            </Animated.View>

        );
}
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

领域驱动设计

领域驱动设计

[美] Eric Evans / 赵俐、盛海艳、刘霞 / 人民邮电出版社 / 2016-6-1 / 69

本书是领域驱动设计方面的经典之作,修订版更是对之前出版的中文版进行了全面的修订和完善。 全书围绕着设计和开发实践,结合若干真实的项目案例,向读者阐述如何在真实的软件开发中应用领域驱动设计。书中给出了领域驱动设计的系统化方法,并将人们普遍接受的一些实践综合到一起,融入了作者的见解和经验,展现了一些可扩展的设计新实践、已验证过的技术以及便于应对复杂领域的软件项目开发的基本原则。一起来看看 《领域驱动设计》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具