javascript - 在两个对象之间画一条垂直线

Question

是否可以在 2 个文本对象之间画一条垂直线？我对此进行了调查，但这并不是我所需要的:

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

 <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',
  },

编辑:

我尝试在两个数字之间添加一个 View :

  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>

但它不在中心

Answer 1

一种方法是创建一个 View ，然后给它一个 height of 100% , width of 1px和 background-colour .然后继续将此 View 放置在两个元素之间。

 <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',
  }