Вертикальный текст рядом с Горизонтальным текстом реагирует на родной?

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 выровняет ваши элементы по направлениюваш флекс, так что по горизонтали, если это строка, по вертикали, если это столбец.
4. justifyContent выравнивает элемент в кросс-оси, поэтому, если ваш флекс является строкой, он выровняет элементы по вертикали

Ох, это то же самое, что и CSS

Answer 2

Я реализовал этот способ, дав фиксированную высоту и немного подправив с помощью 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 3

Вы можете сделать это.

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

Надеюсь, это поможет

Answer 4

Эта скрипка должна приблизить вас: https://jsfiddle.net/1f8png0r/4/

Я бы держался подальше от стиля с использованием JS любой ценой - (в основном $.css() и $.transform() и т. Д.). Это много *На 1007 * медленнее, чем CSS, и CSS гораздо проще поддерживать в будущем, особенно если вы научитесь красиво оформлять селекторы!

Чтобы немного разбить его - вы хотите создать столбец .row a .left и столбец .right.Внутри столбца .left вам нужен текст.Вы хотите преобразовать этот текст и повернуть его - rotate(90deg).Я никогда раньше не использовал для этого flex-inline-flex, но после того, как мне понадобилось несколько раз делать горизонтальный текст, я думаю, что это самое надежное IMHO.

Основное внимание уделяется созданию сетки.по мере необходимости, и для преобразования содержимого в левом столбце сетки относительно столбца (а не относительно строки).

Надеюсь, это поможет вам приблизиться, ура!

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);
}