React Native 转换起源答案

【问题标题】：React Native Transform OriginReact Native 转换起源
【发布时间】：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/…

标签： css reactjs react-native transform

【解决方案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()]} />

【讨论】：

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