React Native 转换起源

Posted 2023-03-06

【中文标题】React Native 转换起源

【英文标题】：React Native Transform Origin

【发布时间】：2019-03-04 19:23:45

【问题描述】：

如何将 transform-origin 属性应用于 react native 的样式？ 我尝试了多种方式，但我没有得到一个事件

我试过了：

transform: [ rotate: ('90deg'),origin: x: 'top', y:'center' ]

【问题讨论】：

看起来尚不支持变换原点github.com/facebook/react-native/issues/1964 和react-native.canny.io/feature-requests/p/…

【参考方案1】：

我认为您可以尝试使用 Styled Components 实现相同的功能。

yarn add styled-components

【参考方案2】：

React native 还没有任何转换原点属性。也许在未来

但是我们可以通过一个技巧来实现这一点????

你应该尝试使用 translateX 或 translateY 技巧。

诀窍是首先将形状的中心移动到要旋转的原点。

例如，我有一个具有这些属性的形状

width: 60
height: 60

要从左上角旋转它，我应该这样做

translateX: -30
translateY: -30
rotate: 45deg
translateX: 30
translateY: 30

旋转完成后要小心，你应该把它翻译回原来的位置

注意：要将形状的中心放在左侧，您可以将其移动一半宽度

在这个例子中，我想将一个形状从最左边的原点旋转 35 度

transform: [
            
               
                translateX: -1 * (widthOfShape / 2)

            
            ,
            
            
                rotate: '35deg'
            ,
               
                translateX: (widthOfShape / 2)

            ,
        ]

【参考方案3】：

我做了一个lib来实现transform-origin。 react-native-anchor-point.

提供CSS中的transform-origin，ios中的锚点，android中的枢轴点等功能。

易于使用

import  withAnchorPoint  from 'react-native-anchor-point';

getTransform = () => 
    let transform = 
        transform: [ perspective: 400 ,  rotateX: rotateValue ],
    ;
    return withAnchorPoint(transform,  x: 0, y: 0.5 ,  width: CARD_WIDTH, height: CARD_HEIGHT );
;

<Animated.View style=[styles.blockBlue, this.getTransform()] />

【讨论】：

你是一个救生员。这正是我所需要的