如何将transform-origin属性应用于 react native 的样式？我尝试了多种方法，但没有收到事件
我试过：
transform: [{ rotate: ('90deg')},{origin: {x: 'top', y:'center'}} ]
react本机转换原点
IT技术
css
reactjs
react-native
transform
2021-04-07 22:03:19
3个回答
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)
},
]
我做了一个 lib 来实现transform-origin. react本地锚点。
提供像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()]} />
我认为您可以尝试使用样式化组件实现相同的功能。
yarn add styled-components