react-native - 删除连续 2 个按钮之间的空格

Question

我连续有 2 个按钮位置，如下所示：

我想删除两个按钮之间的空间，并将它们并排排列成这样：

我怎样才能做到这一点？

我的代码：

<View
  style={{
    flexDirection: "row",
    alignItems: "stretch",
    justifyContent: "center",
    marginTop: 10
  }}
>
  <View style={{ flex: 1 }}>
    <Button title="Button 1" />
  </View>
  <View style={{ flex: 1 }}>
    <Button title="Button 2" />
  </View>
</View>

我在用import { Button } from "react-native-elements";

Answer 1

已经应用了 Button(react-native-elements) 的默认 CSS，如填充和边距。您必须用您的 css 覆盖该 css，然后应用 flex 和 flexDirection 来附加两个按钮。

试试这个代码

<View style={{flex: 1, flexDirection: 'row'}}>
   <Button style={{marginRight: 0}} title="Button 1" />
   <Button style={{marginLeft: 0}} title="Button 2" />
</View>

Answer 2

使用 flexDirection 附加两个。

<View style={{ flex: 1, flexDirection: "row" }}>
    <Button title="Button 1" />
    <Button title="Button 2" />
  </View>

Answer 3

<View style={{flex:1}}>
<View style={{ flexDirection: "row"}}>
<View style={{flexGrow: 1, flexBasis: 1}}>
<Button title="one" />
</View>
<View style={{flexGrow: 1, flexBasis: 1}}>
<Button title="two" />
</View>
</View>