зафиксировать положение линии в центре - масштабированные листы - PullRequest
Новая
       8

зафиксировать положение линии в центре - масштабированные листы

0 голосов
/ 18 июня 2020

Я делаю это, чтобы сделать вертикальную линию между двумя числами: 

 <View style={styles.ridesFriends}>
    <Text style={styles.numbers}>132</Text>
    <View style={styles.verticleLine}></View>
    <Text style={styles.numbers}>2</Text>
 </View>

  ridesFriends: {
    paddingTop: 60,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    // marginLeft: 2,
    // marginRight: 3,
    width: '100%',
  },
  numbers: {
    fontSize: 30,
    color: '#31C283',
    fontWeight: 'bold',
  },
  verticleLine: {
    height: '100%',
    width: 1,
    backgroundColor: '#909090',
  }

Однако линия не отображается точно посередине. Это потому, что 132 длиннее, чем число 2. Если я изменю 132 на 3, то линия появится в центре. Есть ли способ исправить линию посередине? enter image description here

Обновлено: enter image description here

        <View style={styles.ridesFriends}>
          {/* <View style={styles.numbersContainer}> */}
          <Text style={styles.numbers}>132</Text>
          <View style={styles.verticleLine}></View>
          <Text style={styles.numbers}>{numberOfFriends}</Text>
          {/* </View> */}
        </View>

  ridesFriends: {
    paddingTop: 60,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    // marginLeft: 2,
    // marginRight: 3,
    width: '100%',
  },
  numbersContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
  },
  num1: {
    fontSize: 30,
    color: '#31C283',
    fontWeight: 'bold',
    borderRightWidth: 1,
    borderColor: '#909090',
  },
  numbers: {
    fontSize: 30,
    color: '#31C283',
    fontWeight: '900',
    textShadowColor: '#000000',
    textShadowRadius: 0.5,
  },

  verticleLine: {
    height: '100%',
    width: 1,
    backgroundColor: '#E0E0E0',
    //position: 'fixed',
  },

Ответы [ 2 ]

1 голос
/ 18 июня 2020

Поскольку вы установили ширину родительского элемента на 100%, вы можете легко обернуть числовой текст в представления и установить 50% каждое. Код будет следующим: 

    <View style={styles.ridesFriends}>
      <View style={styles.numberWrap}>
        <Text style={styles.numbers}>132</Text>
      </View>
      <View style={styles.verticleLine}></View>
      <View style={styles.numberWrap}>
        <Text style={styles.numbers}>2</Text>
      </View>
    </View>

Стили 

ridesFriends: {
    paddingTop: 60,
    alignItems: 'center',
    flexDirection: 'row',
    // marginLeft: 2,
    // marginRight: 3,
    width: '100%',
  },
  numbers: {
    fontSize: 30,
    color: '#31C283',
    fontWeight: 'bold',
  },
  verticleLine: {
    height: '100%',
    width: 1,
    backgroundColor: '#909090',
  },
  numberWrap: {
    width: '50%',
    alignItems: 'center',
  },
0 голосов
/ 18 июня 2020

Вы можете добавить компонент View вне вашего текста и стилизовать его с помощью flex: 1, чтобы равное пространство для разделения вашего Text компонента.

Затем вы можете добавить {alignItems: 'center',justifyContent: 'center'} в свой текстовый контейнер. для архивации вашего компонента

Попробуйте мой: 

<View style={styles.ridesFriends}>
   <View style={styles.numbersContainer}>
      <Text style={styles.numbers}>132</Text>
   </View>
   <View style={styles.verticleLine}></View>
   <View style={styles.numbersContainer}>
      <Text style={styles.numbers}>2</Text>
   </View>
</View>

ridesFriends: {
    paddingTop: 70,
    alignItems: 'center',
    flexDirection: 'row',
    width: '100%',
    marginBottom: 20,
 },
 numbersContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
 },
 numbers: {
    fontSize: 30,
    color: '#31C283',
    fontWeight: 'bold',
 },
 verticleLine: {
    height: '100%',
    width: 1,
    backgroundColor: '#909090',
 },

Надеюсь, что поможет :)

...