[在同一行中添加2个按钮

Question

如何使用本机基本按钮，使它们看起来都在同一行中？当前，第二个按钮应该位于右侧，但它看起来比第一个按钮低一些。我该如何解决？

          <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之后得到了这个。如何在两个按钮之间留出一些空间？

Answer 1

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

因此您可以在样式中将flexDirection: 'row'添加到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>