Как установить alignSelf для flexDirection = row

Question

Я хочу создать View как flexDirection="row".но я не могу использовать alignSelf, когда использую flexDirection="row".Теперь, как я могу использовать эту цифру:

|                                                 |
|LeftItem-1  LeftItem-2                  RightItem|
|                                                 |

Answer 1

Когда вы используете flexDirection="row", выровняйте себя в вертикальном положении.Когда вы используете flexDirection="column", тогда выровняйте себя горизонтально

Подробнее о flexbox можно узнать здесь: https://css -tricks.com / snippets / css / a-guide-to-flexbox /

Answer 2

Когда вы используете flexbox с flexDirection="row",

alignSelf, а также свойством alignItems, относится к тому, как элементы выровнены по вертикали

Если вы хотите создать этот точныйпоместите два левых элемента в div и используйте

justify-content:space-between;

, чтобы расположить две группы далеко друг от друга по горизонтали

Answer 3

Есть несколько способов добиться этого.Один простой способ получить требуемый макет будет через следующее:

<View style={{ flexDirection : "row" }}>
    <Text>LeftItem-1</Text>
    <Text>LeftItem-2</Text>
    <View style={{ flex : 1 }}></View>
    <Text>RightItem</Text>
</View>

Другой вариант - сгруппировать левые элементы в <View>, а затем использовать space-between - однако это добавитдополнительная сложность для вашего вида структуры и стиля:

 <View style={{ flexDirection : "row", justifyContent:"space-between" }}>
    <View style={{ flexDirection : "row" }}>
      <Text>1</Text>
      <Text>2</Text>
    </View>
    <Text>RightItem</Text>
</View>

Answer 4

Сгруппируйте левую сторону в одну группу и используйте

justify-content:space-between;