在两个物体之间画一条垂直线。

Question

是否有可能在两个文本对象之间画一条竖线？我研究了这个问题，但这不完全是我需要的：

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>

但它不在中心

- user13101751

Answer 1

创建一个视图，然后将其设置为高度为100％，宽度为1像素和背景颜色。然后将此视图放置在两个元素之间即可实现此操作。{{}}

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

- pitaz

---

这条线不完全在中心位置。有没有办法将线条居中对齐？ - user13101751

@Jnl，132后面的额外空格是什么意思？ - Mohammad

我已经移除了它，但是该行仍未居中。可能是因为132有更多的数字，而2只有1个。@Mohammad - user13101751

请分享您的数字样式。 - pitaz

我刚刚试了一下，它与@Jnl的那些样式完全对齐。 - pitaz

Answer 2

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

- cookiedough

---

我尝试了这个，但是没有任何显示：num1: { fontSize: 30, color: '#31C283', fontWeight: "bold", borderRightWidth: 1, borderColor: '#909090', }请注意，我在React Native中使用样式表。 - user13101751

Answer 3

<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%;
}

你可以使用这段代码，使文本具有相等的空间并且居中对齐

希望能对你有所帮助

- Arun