如何在 React Native 中将第一项左对齐，将第二项右对齐？

【问题标题】：How to align the first item left, and the second right in a row in react native?如何在 React Native 中将第一项左对齐，将第二项右对齐？
【发布时间】：2022-12-18 11:22:58
【问题描述】：

我将两个项目（例如两个按钮）排成一行。我想将第一项左对齐，将第二项右对齐，如下所示：

如何使用 flex 在本机反应中实现这一点？

【问题讨论】：

标签： css react-native flexbox

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

为此，请使用space-between。如果容器的 width 大于 2 个按钮，您会看到一个在左边，一个在右边

doc

【讨论】：