如何在react native中使<Text />垂直(旋转90度)?我想在页面的右侧沿着屏幕的边缘有一些文本。
<Text />
ldxq2e6h1#
您可以使用转换。https://facebook.github.io/react-native/docs/transforms.html#proptypes
myStyle: { transform: [{ rotate: '90deg'}] }
pexxcrt22#
在样式中,使用变换旋转和元素
style={{transform: [{ rotate: '180deg' }]}}
例如:
<View style={{transform: [{ rotate: '180deg' }]}} />
baubqpgj3#
对于任何使用Material-UI Typography和makeStyles()的人来说,这应该可以工作:
myClassName: { transform: "rotate(90deg)" },
cnwbcb6i4#
创建视图
<View style={styles.arrow_1_6} ></View>
添加样式转换:[{ rotate:'14 deg' }],如果您使视图位置绝对,它将不会影响其他视图!
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,
},
luaexgnf5#
在样式中,使用transform旋转元素style={{transform: "rotate(90deg)"}}对我很有效
style={{transform: "rotate(90deg)"}}
jv2fixgn6#
transform:[{ rotate:'XXdeg'}
ppcbkaq57#
试试这个更好的定位,尤其是全屏
const leftTransform = [ { rotate: '90deg' }, { translateY: (screenHeight - screenWidth) / 2 }, { translateX: (screenHeight - screenWidth) / 3 }, ];
7条答案
按热度按时间ldxq2e6h1#
您可以使用转换。
https://facebook.github.io/react-native/docs/transforms.html#proptypes
pexxcrt22#
在样式中,使用变换旋转和元素
例如:
baubqpgj3#
对于任何使用Material-UI Typography和makeStyles()的人来说,这应该可以工作:
cnwbcb6i4#
创建视图
添加样式转换:[{ rotate:'14 deg' }],如果您使视图位置绝对,它将不会影响其他视图!
},
luaexgnf5#
在样式中,使用transform旋转元素
style={{transform: "rotate(90deg)"}}
对我很有效
jv2fixgn6#
transform:[{ rotate:'XXdeg'}
ppcbkaq57#
试试这个更好的定位,尤其是全屏