如何在react native中将一行中的第一个项目左对齐，第二个项目右对齐？

yv5phkfx 于 2022-12-14 发布在 React

关注(0)|答案(2)|浏览(176)

我将两个项目（例如两个按钮）放在一行中。我希望第一个项目左对齐，第二个项目右对齐，如下所示：

如何在react native中使用flex实现这一点？

来源：https://stackoverflow.com/questions/74713935/how-to-align-the-first-item-left-and-the-second-right-in-a-row-in-react-native

2条答案

按热度按时间

2g32fytz1#

经过一番挖掘，我发现有两种简单的方法可以实现这一点：

// first way
<View style={{flexDirection: "row", justifyContent: "space-between"}}>
<Button>B1</Button> // align left
<Button>B2</Button> // align right
</View>

// second way
<View style={{flexDirection: "row"}}>
<Button>B1</Button> // align left
<Button style={{marginLeft: "auto"}}>B2</Button> // align right
</View>

赞(0）回复(0）举报 2022-12-14

t5zmwmid2#

如果容器的width大于2个按钮，您将看到一个在左边，一个在右边
doc

赞(0）回复(0）举报 2022-12-14