react-native - 如何垂直旋转文本及其宽度

Question

我渲染了一个文本并旋转如下，

<Text style={{transform: [{rotate: '270deg'}]}}>Sum Of Potential Revenue</Text>

结果如下，

当我旋转文本时，文本的宽度保持不变，导致大量空白空间。

谁能告诉我如何避免空间问题？

标签： react-nativetext

Answer 1

请查看此链接：https ://medium.com/@therealmaarten/how-to-layout-rotated-text-in-react-native-6d55b7d71ca5

示例代码：

const TEXT_LENGTH = 40
const TEXT_HEIGHT = 14
const OFFSET = TEXT_LENGTH / 2 - TEXT_HEIGHT / 2
…
<View style={{ width: TEXT_HEIGHT, height: TEXT_LENGTH }}>
  <Text style={{
    transform: [
      { rotate: "90deg" }, 
      { translateX: -OFFSET }, 
      { translateY: OFFSET }
    ],
    width: TEXT_LENGTH,
    height: TEXT_HEIGHT
  }}>
    {text}
  </Text>
</View>