проведите вертикальную линию между двумя объектами - PullRequest
Новая
       10

проведите вертикальную линию между двумя объектами

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

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

https://reactjsexample.com/draw-a-line-between-two-elements-in-react/

enter image description here

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

  ridesFriends: {
    paddingTop: 70,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    width: '100%',
  },
  numbers: {
    fontSize: 30,
    color: '#31C283',
    fontWeight: 'bold',
  },

Изменить:

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

  verticleLine:{
    height: '100%',
    width: 1,
    backgroundColor: '#909090',
  },

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

, но оно не в центре enter image description here

Ответы [ 3 ]

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

Один из способов сделать это - создать представление и присвоить ему height of 100%, width of 1px и background-colour. Затем перейдите к размещению этого представления между двумя элементами.

enter image description here

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

ridesFriends: {
    paddingTop: 70,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    width: '100%',
    marginBottom: 20,
  },
  numbers: {
    fontSize: 30,
    color: '#31C283',
    fontWeight: 'bold',
  },
  verticleLine: {
    height: '100%',
    width: 1,
    backgroundColor: '#909090',
  }
0 голосов
/ 07 июля 2020 
<View style={styles.ridesFriends}>
   <div className="wrapper">
      <Text className="text1" style={styles.numbers}>132</Text>
      <View className="view" style={styles.verticleLine}></View>
      <Text className="text2" style={styles.numbers}>{numberOfFriends}</Text>
   </div>       
 </View>

css файл 

.wrapper{
   width:100%;
}
.text1{
   width: 49%;
}
.text2{
   width: 49%;
}
.view{
  width:2%;
}

вы можете использовать этот код, чтобы текст был одинаковым, а строка была в центре

Надеюсь, это поможет

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

Вы можете просто присвоить объекту слева (styles.numbers) border-right: 1px solid gray;. Вы можете сделать это для всех элементов в строке, и вы можете сделать условие для удаления границы для «дочернего элемента широты».

...