水平文本旁边的垂直文本反应原生？

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>

结果：

这么小的样式指针：

1. flexDirection默认是列，所以如果你不说它是一行，你的视图将垂直堆叠
2. flex在 flexDirection 中填充您的屏幕。我的行中有 2 个带有 flex 的元素，因此 view1 将占据空间的 1/9，而 view2 将占据 8/9
3. Alignitems会在你的 flex 方向对齐你的项目，如果它是一行，那么水平对齐，如果它是一列，则垂直对齐。
4. justifyContent在横轴对齐项目，因此如果您的 flex 是一行，它将垂直对齐项目

哦，它和 css 一样