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>

        );
}
}

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

查看所有标签

猜你喜欢:

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

Perl语言入门

Perl语言入门

[美] Randal L.Schwartz、Tom Phoenix / 李晓峰 / 中国电力出版社 / 2002-8 / 48.00元

本书第一版于1993年问世,并从此成为畅销书。本书由Perl社区最著名、最活跃的两位成员写成,是Perl程序设计语言的精髓指南。 Perl最初只是Unix系统管理员的一个工具,在工作日里被用在无数的小任务中。从那以后,它逐步发展成为一种全功能的程序设计语言,特别是在各种计算平台上,它被用作Web编程、数据库处理、XML处理以及系统管理——它能够完成所有这些工作,同时仍然是处理小的日常工作的完......一起来看看 《Perl语言入门》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具