如何旋转 <Text />
来自 React ART ?
<Text />
是 <Shape />
基于使用 native 文本呈现的文本内容,因此,我应该能够使用 transform={ ??? }
在里面。我没有找到任何旋转的例子。
我应该添加什么才能旋转这个 <Text />
吼叫?
import { ART } from 'react-native';
const { Text } = ART;
<Text x={0} y={0}
font={`25px "Helvetica Neue", "Helvetica", Arial`}
fill={'red'}
alignment={'center'}>
Random Text that needs rotation
</Text>
添加style={{ transform: '[{ rotate: "45deg"}]' }}
不支持,我收到以下错误:
Property 'style' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> & Readonly'.
因为我使用的是 <Text \>
来自 React ART 而 NOT 来自 react-native
的经典作品
最佳答案
是的,您可以使用 ART
Transform 旋转和变换 ART
Text
。
import { ART } from 'react-native';
const { Text, Transform } = ART;
const rotate = new Transform().rotate(45) // rotate
const rotateAndMove = new Transform().rotate(45).translate(10, 20) // x,y
<Text x={0} y={0}
transform={rotate}
font={`25px "Helvetica Neue", "Helvetica", Arial`}
fill={'red'}
alignment={'center'}>
Random Text that needs rotation
</Text>
<Text x={0} y={0}
transform={rotateAndMove}
font={`25px "Helvetica Neue", "Helvetica", Arial`}
fill={'red'}
alignment={'center'}>
Rotated and moved x=10 y=20
</Text>
关于react-native - React Art <Text/> 旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56792445/