Javascript 在两个对象之间绘制垂直线

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

编辑：

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

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

132
{numberOfFriends}

但它不在中心

---

您只需给左边的对象（

样式.数字

）一个

边框右边：1px纯色灰色。您可以对一行中的所有项目执行此操作，并且可以设置一个条件来删除“最后一个子项”的边框。
一种方法是创建一个视图，然后将其高度设置为100%

，

宽度设置为1px

，背景颜色设置为

。然后继续将此视图放置在两个图元之间



132
2.
朋友们：{
paddingTop:70，
对齐项目：“居中”，
flexDirection:'行'，
为内容辩护：“间隔均匀”，
宽度：“100%”，
marginBottom:20，
},
编号：{
尺寸：30，
颜色：“#31C283”，
fontWeight:'粗体'，
},
垂直线：{
高度：“100%”，
宽度：1，
背景颜色：“#9090”，
}

您可以使用此代码，使文本具有相等的空间，且线条位于中心

希望它能有所帮助
我尝试过这个，但没有出现任何效果

num1:{fontSize:30，color:'#31C283'，fontwweight:'bold'，borderRightWidth:1，borderColor:'#909090'，}注意，我在react-native中使用的是样式表。这条线并不完全在中间。有没有办法把这条线固定在中间？@Jnl 132后面的多余空格是什么？我已经去掉了，但这条线仍然不在中间。可能是因为132有更多的数字，而2只有1@Mohammad请分享你的号码样式我现在刚试过。它与这些样式@Jnl正确对齐

  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>

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

<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>

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