删除连续 2 个按钮之间的空格答案

【问题标题】：Remove space between 2 button in a row删除连续 2 个按钮之间的空格
【发布时间】：2019-09-12 16:59:52
【问题描述】：

我有 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";

【问题讨论】：

标签： react-native react-native-elements react-native-button

【解决方案1】：

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

【讨论】：

请添加一些解释。在 SO 中不鼓励仅代码答案

【解决方案2】：

已经应用了 Button(react-native-elements) 的默认 CSS，例如 padding 和 margin。您必须用您的 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>

【讨论】：

【解决方案3】：

使用 flexDirection 附加两个。

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

【讨论】：