反应原生转换源

Question

如何transform-origin在react native 中将属性应用于样式？我已经尝试了几种方法，但没有得到任何活动

我试过了：

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

Answer 1

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)

            },
        ]

旋转完成后要小心，您应该将其转换回原来的位置

Answer 2

我做了一个 lib 来实现transform-origin. 反应本地锚点。

提供像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()]} />