如何为 flexDirection=row 设置alignSelf

Question

我想创建一个Viewas 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/