Добавьте 2 кнопки в одной строке - PullRequest
Новая
       24

Добавьте 2 кнопки в одной строке

0 голосов
/ 28 апреля 2020

Как я могу использовать кнопки 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. Как сделать пробел между двумя кнопками?

enter image description here

Ответы [ 2 ]

2 голосов
/ 28 апреля 2020

Обычно, когда вы хотите, чтобы 2 компонента в одной строке, вы могли обернуть их с помощью View и добавить flexDirection: 'row' к стилю.

Таким образом, вы можете добавить flexDirection: 'row' и justifyContent: 'space-between' (к пробелу). дочерние компоненты) на buttonView объект в стилях

1 голос
/ 28 апреля 2020 
      <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
}
...