Question

我想将View创建为flexDirection="row"。但是当我使用alignSelf时不能使用flexDirection="row"。现在，我该如何使用该数字：

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

Answer 1

使用flexDirection="row"时，alignSelf垂直工作。当您使用flexDirection="column"时，alignSelf会水平工作。

因此，您必须使用JustifyContent。

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

这样您就可以实现输出。

您可以在此处了解有关flexbox的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

有几种方法可以实现这一目标。一种实现所需布局的简单方法是通过以下方式：

<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 3

将左侧分组为一组，然后使用

justify-content:space-between;

Answer 4

当您将Flexbox与flexDirection="row"配合使用时，

alignSelf以及alignItems属性，是指项目如何垂直对齐

如果要创建此精确数字，请将剩下的两个项目放在div中，然后使用

justify-content:space-between;

将两组水平分开放置

如何为flexDirection = row设置alignSelf

4 个答案: