反应原生变换原点 [英] React Native Transform Origin

问题描述

如何将transform-origin属性应用于Reaction Native中的样式？ 我尝试了多种方法，但没有收到事件

我已尝试：

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

推荐答案

Reaction NATIVE尚无任何转换原点属性。也许在未来

但我们可以通过一个技巧实现此🐈

您应该尝试使用转换X或转换Y技巧。

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

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

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)

            },
        ]

这篇关于反应原生变换原点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！