如何在本机反应中使文本垂直（旋转 90 度）？答案

【问题标题】：How can I make text vertical (rotated 90 deg) in react native?如何在本机反应中使文本垂直（旋转 90 度）？
【发布时间】：2016-05-05 04:42:35
【问题描述】：

如何使<Text /> 在本机反应中垂直（旋转 90 度）？我想在页面右侧沿屏幕边缘放置一些文本。

【问题讨论】：

标签： react-native

【解决方案1】：

您可以使用转换。

https://facebook.github.io/react-native/docs/transforms.html#proptypes

myStyle: {
    transform: [{ rotate: '90deg'}]
}

【讨论】：

@JacobLauritzen 它在 React Native 中工作！我现在已经测试过了，它适用于 0.52.0 版本。
@shimatai 太棒了！不过，我正在回复之前的（现已删除）评论，而不是解决方案。该解决方案效果很好。
就我而言，文本被包裹在一个 Touchable 中。并且旋转后，可触摸区域似乎保持不变。有什么想法吗？
@chengsam Offhand 我猜你可能还需要旋转 Touchable（或者如果它是一个孩子，旋转 Touchable 也会旋转文本）。

【解决方案2】：

在样式中，使用transform来旋转和元素

style={{transform: [{ rotate: '180deg' }]}}

例如：

<View style={{transform: [{ rotate: '180deg' }]}} />

【讨论】：

【解决方案3】：

对于任何使用带有 makeStyles() 的 Material-UI 排版的人，这应该可以工作：

myClassName: {
    transform: "rotate(90deg)"
},

【讨论】：

【解决方案4】：

创建视图

            <View style={styles.arrow_1_6} ></View>

添加样式变换：[{ rotate: '14deg' }]，如果您将视图位置设为绝对位置，则不会影响另一个视图！

从 0 到 360 度开始旋转。

   arrow_1_6: {
   transform: [{ rotate: '14deg' }],
  width: 260,
  marginTop: 145,
  position: 'absolute',
  marginLeft: 75,
  backgroundColor: 'orange',
  height: 4,
  flexDirection: "row",
  padding: 0,
  alignItems: 'center',
  justifyContent: 'flex-start',
  borderBottomColor: '#075fff',
  borderBottomWidth: 4,

【讨论】：