在同一行添加 2 个按钮

Question

如何使用 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 后得到这个。如何在两个按钮之间制作一些 space？

Answer 1

通常当你想在同一行中放置 2 个组件时，你可以用视图包裹它们并添加 flexDirection: 'row' 样式。

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

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

Answer 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;
}

在同一行添加 2 个按钮

Add 2 buttons in the same line

javascript

css

typescript

react-native

native-base