在同一行添加 2 个按钮

Posted 2023-03-13

【中文标题】在同一行添加 2 个按钮

【英文标题】：Add 2 buttons in the same line

【发布时间】：2020-08-12 05:16:24

【问题描述】：

如何使用 Native Base 按钮​​，使它们看起来在同一行？目前，第二个按钮应该在右侧，但它看起来比第一个按钮低一点。我该如何解决这个问题？

          <View style=scaledAvailableTripsStyles.buttonView>
          <Button
          rounded
          style=scaledAvailableTripsStyles.button>
          <Text style=scaledAvailableTripsStyles.text>Button 1</Text>
        </Button>
        <View style=scaledAvailableTripsStyles.rightButtonView>
        <Button
          rounded
          style=scaledAvailableTripsStyles.buttonBlack>
          <Text style=scaledAvailableTripsStyles.text>Button 2</Text>
        </Button>
        </View>
        </View>

样式：

button: 
    width: moderateScale(170),
    height: moderateScale(40),
    backgroundColor: '#31C283',
    justifyContent: 'center',

  ,
  buttonBlack: 
    width: moderateScale(170),
    height: moderateScale(40),
    backgroundColor: '#2E3331',
    justifyContent: 'center',

  ,
  text: 
    fontSize: moderateScale(14, 0.7),
  ,
  searchField: 
    width: 300,
  ,
  buttonView: 
    paddingTop: 450,
  ,
  rightButtonView: 
    paddingLeft: 200,
  

编辑： 添加 flexDirection 后得到这个。如何在两个按钮之间留出一些空间？

【问题讨论】：

您可以添加屏幕截图，以便社区更清楚地了解吗？

【参考方案1】：

通常，当您希望 2 个组件在同一行中时，您可以用 View 包装它们并添加 flexDirection: 'row' 到样式。

因此，您可以将 flexDirection: 'row' 和 justifyContent: 'space-between'（到空间子组件）添加到样式中的 buttonView 对象

【讨论】：

你能看到更新的qs吗？两个按钮靠得太近了

@a125 您可以将justifyContent: 'space-between' 添加到buttonView 以在按钮之间添加空格

【参考方案2】：

      <View style=styles.ButtonContainer>
       <View style=scaledAvailableTripsStyles.buttonView>
            <Button
               rounded
               style=scaledAvailableTripsStyles.button>
               <Text style=scaledAvailableTripsStyles.text>Button 1</Text>
            </Button>
      </View>
      <View style=scaledAvailableTripsStyles.rightButtonView>
            <Button
               rounded
               style=scaledAvailableTripsStyles.buttonBlack>
               <Text style=scaledAvailableTripsStyles.text>Button 2</Text>
            </Button>
      </View>
    </View>

样式：

ButtonContainer: 
   flexDirection: 'row',
   alignItems: 'center' //This will center you button

【讨论】：

你能看到更新的qs吗？ flexDirection 似乎可以工作，但两个按钮之间没有任何空间。

如果你想左右对齐，那么'justifyContent: space-between'或'justifyContent: space-around'。如果它没有帮助，那么你可以使用 marginRight。

【参考方案3】：

html 代码

<div class="btnDiv">
    <button class="regBtn" type="submit">Register</button>
    <button class="regBtn" type="submit">Login</button>
</div>

CSS 代码

.btnDiv
    position: relative;

.regBtn
    padding: 10px;
    margin-top: 20px;
    width: 49%;
    background-color: cadetblue;
    border-radius: 3px;
    border: none;
    color: white;
    font-weight: bold;
    display: inline-block;