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

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

编辑：

我尝试在两个数字之间添加一个视图：

  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

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

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

Answer 2

您可以简单地给左边的对象 ( styles.numbers) a border-right: 1px solid gray;。您可以对一行中的所有项目执行此操作，并且可以设置一个条件来删除“最后一个子项”的边框。