Javascript 固定一条线'；s在中心的位置-缩放图纸

我这样做是为了在两个数字之间画一条垂直线：

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

  ridesFriends: {
    paddingTop: 60,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    // marginLeft: 2,
    // marginRight: 3,
    width: '100%',
  },
  numbers: {
    fontSize: 30,
    color: '#31C283',
    fontWeight: 'bold',
  },
  verticleLine: {
    height: '100%',
    width: 1,
    backgroundColor: '#909090',
  }

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

然而，这条线并不出现在正中间。这是因为132比数字2长。如果将132改为3，则该线显示在中心。有没有办法在中间修线？

更新：

{/*  */}
132
{numberOfFriends}
{/*  */}
朋友们：{
paddingTop:60，
对齐项目：“居中”，
flexDirection:'行'，
为内容辩护：“间隔均匀”，
//边缘左：2，
//marginRight:3，
宽度：“100%”，
},
数字容器：{
对齐项目：“居中”，
为内容辩护：“中心”，
弹性：1，
},
num1：{
尺寸：30，
颜色：“#31C283”，
fontWeight:'粗体'，
borderRightWidth:1，
边框颜色：“#9090”，
},
编号：{
尺寸：30，
颜色：“#31C283”，
fontWeight:'900'，
textShadowColor:“#000000”，
text阴影半径：0.5，
},
垂直线：{
高度：“100%”，
宽度：1，
背景颜色：'#e0'，
//位置：'固定'，
},

您可以在文本外部添加

视图

组件，并使用

flex:1

对其进行样式设置，以使

文本

组件的分隔空间相等

然后，您可以在文本容器视图中添加

{alignItems:'center'，justifyContent:'center'}

，以归档组件

试试我的：

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

当您将父文本的宽度设置为100%时，您可以轻松地将数字文本包装到视图中，并将每个文本的宽度设置为50%。代码如下所示

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

---

你能看看我刚才添加的最新图片吗？当我使用edit时，该行变得太大。我认为这是由于

缺少
flexDirection:“行”
属性造成的，因此它将使用
列作为默认flexDirection。尝试添加：）或者您可以使用完整代码进行更新，我可以看一下吗？
    <View style={styles.ridesFriends}>
      <View style={styles.numberWrap}>
        <Text style={styles.numbers}>132</Text>
      </View>
      <View style={styles.verticleLine}></View>
      <View style={styles.numberWrap}>
        <Text style={styles.numbers}>2</Text>
      </View>
    </View>

ridesFriends: {
    paddingTop: 60,
    alignItems: 'center',
    flexDirection: 'row',
    // marginLeft: 2,
    // marginRight: 3,
    width: '100%',
  },
  numbers: {
    fontSize: 30,
    color: '#31C283',
    fontWeight: 'bold',
  },
  verticleLine: {
    height: '100%',
    width: 1,
    backgroundColor: '#909090',
  },
  numberWrap: {
    width: '50%',
    alignItems: 'center',
  },