react-native - React Art <Text/> 旋转

标签 react-native

如何旋转 <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/

相关文章:

javascript - 如何在 react 导航6中分别处理两个抽屉?

javascript - 将数据/页面保存到 native react 列表中

javascript - 如何使用 React Native 访问对象的属性?

ios - 仪器中的 xcrun 错误

javascript - this.state.map 不是 React Native 中的函数

react-native - 是否有用于 native react 的简单同步存储选项?

ios - React Native Navigator 转换问题

react-native - 如何在React Native上隐藏createStackNavigator的 header ?

react-native - 如何在 react-native 中创建线性渐变(在图像顶部和应用栏下方)

javascript - 在 render() 中显示 featch json 数据时 React Native 出错