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

Question

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



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

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

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

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

Answer 1

您真的应该尝试使用 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>

结果:


这么小的样式指针:

flexDirection 是默认列，所以如果你不说它是一行，
您的 View 将垂直堆叠

柔性 在 flexDirection 中填充您的屏幕。我的行中有 2 个带有 flex 的元素，因此 view1 将占据空间的 1/9，而 view2 将占据 8/9

对齐元素 将在您的 flex 方向对齐您的元素，如果它是一行，则水平对齐，如果它是列，则垂直对齐。

justifyContent 对齐横轴中的元素，因此如果您的 flex 是一行，它将垂直对齐元素

哦，它和 css 一样