3

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

在此处输入图像描述

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

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

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

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

4

4 回答 4

12

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

于 2018-12-14T08:34:47.133 回答
1

这个小提琴应该让你接近：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);
}
于 2018-12-14T01:11:16.110 回答
0

我以这种方式实现了固定高度并使用 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

于 2018-12-14T01:39:55.750 回答
0

你可以这样做。

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)。

希望这可以帮助

于 2018-12-14T01:40:18.647 回答