gpt4 book ai didi

css - 水平文本旁边的垂直文本 react 原生?

转载 作者:行者123 更新时间:2023-12-04 14:34:20 24 4
gpt4 key购买 nike

我基本上是在尝试创建这样的东西:

enter image description here

两个框,红色一个是竖排文字,蓝色一个是横排文字。红框的高度应该和蓝框一样

我知道我可以通过执行以下操作来使文本侧向:

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

在它上面,但我在让其余部分正常工作以及让盒子对齐和调整大小时遇到​​问题。任何帮助将不胜感激!

最佳答案

您真的应该尝试使用 React Native 的布局并发布您尝试过的内容,但这里有一个示例代码

<View style={{ height: 100, flexDirection: 'row'}}>
<View style={{ flex: 1, backgroundColor: 'red', alignItems: 'center', justifyContent: 'center' }}><Text style={{transform: [{ rotate: '-90deg'}]}}>Value</Text></View>
<View style={{ flex: 8, backgroundColor: 'blue', alignItems: 'center', justifyContent: 'center'}}><Text>Short Text</Text></View>
</View>

结果:
enter image description here

这么小的样式指针:
  • flexDirection 是默认列,所以如果你不说它是一行,
    您的 View 将垂直堆叠
  • 柔性 在 flexDirection 中填充您的屏幕。我的行中有 2 个带有 flex 的元素,因此 view1 将占据空间的 1/9,而 view2 将占据 8/9
  • 对齐元素 将在您的 flex 方向对齐您的元素,如果它是一行,则水平对齐,如果它是列,则垂直对齐。
  • justifyContent 对齐横轴中的元素,因此如果您的 flex 是一行,它将垂直对齐元素

  • 哦,它和 css 一样

    关于css - 水平文本旁边的垂直文本 react 原生?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53772136/

    24 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com