如何在react native中使文本垂直(旋转90度)?

trnvg8h3  于 2023-04-22  发布在  React
关注(0)|答案(7)|浏览(315)

如何在react native中使<Text />垂直(旋转90度)?我想在页面的右侧沿着屏幕的边缘有一些文本。

ldxq2e6h

ldxq2e6h1#

您可以使用转换。
https://facebook.github.io/react-native/docs/transforms.html#proptypes

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

pexxcrt22#

在样式中,使用变换旋转和元素

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

例如:

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

baubqpgj3#

对于任何使用Material-UI Typography和makeStyles()的人来说,这应该可以工作:

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

cnwbcb6i4#

创建视图

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

添加样式转换:[{ rotate:'14 deg' }],如果您使视图位置绝对,它将不会影响其他视图!

  • 旋转从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,

},

luaexgnf

luaexgnf5#

在样式中,使用transform旋转元素style={{transform: "rotate(90deg)"}}
对我很有效

jv2fixgn

jv2fixgn6#

transform:[{ rotate:'XXdeg'}

ppcbkaq5

ppcbkaq57#

试试这个更好的定位,尤其是全屏

const leftTransform = [
  { rotate: '90deg' },
  { translateY: (screenHeight - screenWidth) / 2 },
  { translateX: (screenHeight - screenWidth) / 3 },
];

相关问题