Почему мои кнопки убегают с экрана?

Question

Я пытаюсь, чтобы мои две кнопки сидели в ряду, на равном расстоянии друг от друга, и я хочу, чтобы они были одинаковой высоты и ширины.Но на данный момент они выглядят так.

Я очень новичок в React Native, поэтому, пожалуйста, осторожно!

Вотмой код для того, что вернулся.

return (
      <View style={styles.screen}>
        <View style={styles.horseProfile}>
          <HorseProfile />
        </View>

        <View style={styles.vitalSignsGrid}>
          <LargeVitalSigns />
        </View>

        <View style={styles.buttonContainer}>
          <TouchableOpacity onPress={this._alertHandler}>
            <View style={styles.buttonStyling}>
              <Text style={styles.buttonText}>ECG</Text>
            </View>
          </TouchableOpacity>

          <TouchableOpacity onPress={this._alertHandler}>
            <View style={styles.buttonStyling}>
              <Text style={styles.buttonText}>Resp Pattern</Text>
            </View>
          </TouchableOpacity>
        </View>

        <View>{/* timer and stop button */}</View>
      </View>
    )

Вот мои стили.

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  horsePatientProfile: {
    flex: 1
  },
  vitalSignsGrid: {
    flex: 3,
    backgroundColor: '#14172B'
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: 'green',
    width: '100%',
    flex: 4
  },
  buttonStyling: {
    backgroundColor: '#2B4250',
    borderRadius: 30,
    alignItems: 'center',
    justifyContent: 'space-around',
    width: '50%',
    height: '35%',
    flexDirection: 'row',
  },
  buttonText: {
    color: '#84C5C6',
    fontWeight: 'bold'
  }
})

Может кто-нибудь помочь, пожалуйста?Спасибо.

Answer 1

Для высоты, ширины попробуйте использовать React Native Dimensions React Native Dimensions

Импортировать его:

import {Dimensions} from "react-native";
var {height, width} = Dimensions.get('window');

Пример использования в стиле:

  buttonStyling: {
    backgroundColor: '#2B4250',
    borderRadius: 30,
    alignItems: 'center',
    justifyContent: 'space-around',
    width: width/2,
    height: height / 3.5,
    flexDirection: 'row',
  },

или используйте Flexbox

Answer 2

ширина ваших кнопок styles.buttonStyling составляет 50%, что составляет 50% от родительского компонента, родительским объектом является touchableOpacity, поскольку он не имеет заданной ширины, он будет растягиваться вместе с содержимым, другими словами,50% не означает одно и то же, вы должны дать точную (относительный размер, мне нравится реагировать-нативный-размер-материя) непрозрачной прозрачности и выровнять Content как пространство между пробелами равномерно