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 是默认列，因此，如果您不说它连续，您的视图将垂直堆叠
flex 将屏幕显示在flexDirection中。我的行中有2个带有flex的元素，因此view1将占据空间的1/9，view2将占据空间的8/9
Alignitems 将使元素沿Flex方向对齐，如果是行，则水平对齐，如果是列，则垂直对齐。
justifyContent 在横轴上对齐项目，因此，如果flex是一行，它将在垂直方向上对齐项目

嘿，它和CSS一样

Answer 2

这个小提琴会让您靠近：https://jsfiddle.net/1f8png0r/4/

我将不惜一切代价避免使用JS样式-（主要是$.css()和$.transform()，等等）它比CSS慢了许多，而且CSS易于实现保持前进的道路-特别是如果您可以学习如何很好地选择样式！

稍微细分一下-您想创建一个.row，一个.left列和一个.right列。在.left列中，您需要一些文本。您要转换文本并旋转文本-rotate(90deg)。在此之前，我从未使用过flex和inline-flex，但是在需要做几次水平文本之后，我认为这是最可靠的恕我直言。

主要重点是根据需要创建网格，并相对于列（而不是相对于行）转换网格左列中的内容。

希望这能帮助您拉近距离，加油！

HTML

<div class="row">
    <div class="left">
        <span class="h-text">LEFT</span>
    </div>
    <div class="right">RIGHT</div>
</div>

CSS

.row {
    width: 756px;
    height: 100px;
    border: 2px solid green;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.right {
    width: 80%;
    height: 100%;
    background: red;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.left {
    width: 20%;
    height: 100%;
    background: blue;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.left .h-text {
    position: absolute;
    transform: rotate(-90deg);
}

Answer 3

我通过这种方式实现了固定高度并通过flex进行了一些调整：

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

          <View
            style={{
              flex: 1,
              backgroundColor: 'aqua',
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text>Some text here....</Text>
          </View>
        </View>
      </View>

如果您想玩耍，这里是小吃的链接。可能有多余的样式。您可以在零食中玩。

我希望你有主意吗？

https://snack.expo.io/@roshangm1/humiliated-cookies

Answer 4

您可以这样做。

https://codepen.io/anon/pen/yGepmm

这是使用flexbox的方法。我使用sass来获得清晰的语法（否；）

.sass

  div:first-child
    display: flex
    justify-content: center
    align-items: center
    transform: rotate(270deg)
    width: 100px
    background: blue
    color: white
    text-align: center
    vertical-align: middle

  div:nth-child(2)
    display: flex
    padding-left: 2rem
    background: lightgreen
    justify-content: start-end
    align-items: center
    color: grey
    height: 91px
    width: 100%

.html

<section>
<div>
  Value
</div>
<div>
  Lorem Ipsum
</div>
</section>

这是一个非常少的代码实现，您现在必须手动计算：

div:first-child的高度（这是宽度，因为旋转）。
高度div:nth-child(2)。

希望这会有所帮助

“水平文本”旁边的垂直文本会做出本机反应？

4 个答案:

HTML

CSS