React Native变换原点

Question

我该如何在React Native中应用transform-origin属性的样式？我尝试过多种方法，但都没有成功。

我尝试过：

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

- Lucca Dias

---

似乎变换原点尚未得到支持 https://github.com/facebook/react-native/issues/1964 和 https://react-native.canny.io/feature-requests/p/transforms-transform-origin-support - Brandon Culley

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)

            },
        ]

- TheEhsanSarshar

Answer 2

我制作了一个库来实现 transform-origin。 react-native-anchor-point.

提供类似于 CSS 中的 transform-origin，在 iOS 中的 anchor point 和在 Android 中的 pivot point 的功能。

易于使用。

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

- RY_ Zheng

---

你真是个救命恩人。这正是我所需要的。 - Jared Beach

除了存储库中的示例之外，还有其他使用这个库的例子吗？对于不同类型的转换，它并不太清楚。 - Facundo Colombier

Answer 3

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

yarn add styled-components

- Michael Wayne KM