时间戳

首页 > 解决方案 > 水平文本旁边的垂直文本反应原生？

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

问题描述

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

在此处输入图像描述

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

我知道我可以通过以下方式使文本横向显示：

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

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

标签： cssreact-nativeflexboxvertical-text

解决方案

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

推荐阅读