将一条线的 position 固定在中心 - 缩放表

Question

I am doing this to make a verticle line in between two numbers:

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

However, the line doesn't appear in the exact middle. This is because 132 is longer than the number 2. If I change 132 to just 3, then the line appears in the center. Is there any way to fix the line in the middle?

Updated:

        <View style={styles.ridesFriends}>
          {/* <View style={styles.numbersContainer}> */}
          <Text style={styles.numbers}>132</Text>
          <View style={styles.verticleLine}></View>
          <Text style={styles.numbers}>{numberOfFriends}</Text>
          {/* </View> */}
        </View>

  ridesFriends: {
    paddingTop: 60,
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    // marginLeft: 2,
    // marginRight: 3,
    width: '100%',
  },
  numbersContainer: {
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
  },
  num1: {
    fontSize: 30,
    color: '#31C283',
    fontWeight: 'bold',
    borderRightWidth: 1,
    borderColor: '#909090',
  },
  numbers: {
    fontSize: 30,
    color: '#31C283',
    fontWeight: '900',
    textShadowColor: '#000000',
    textShadowRadius: 0.5,
  },

  verticleLine: {
    height: '100%',
    width: 1,
    backgroundColor: '#E0E0E0',
    //position: 'fixed',
  },

Answer 1

As you have set the width of the parent to 100% you can easily wrap the number texts into views and set 50% each. The code would be like below

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

Styles

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

Answer 2

You can add a View component outside your text and style it with flex: 1 to equal separating space for your Text component.

Then you can add {alignItems: 'center',justifyContent: 'center'} in your Text container view to archive your component

Try mine:

 <View style={styles.ridesFriends}> <View style={styles.numbersContainer}> <Text style={styles.numbers}>132</Text> </View> <View style={styles.verticleLine}></View> <View style={styles.numbersContainer}> <Text style={styles.numbers}>2</Text> </View> </View> ridesFriends: { paddingTop: 70, alignItems: 'center', flexDirection: 'row', width: '100%', marginBottom: 20, }, numbersContainer: { alignItems: 'center', justifyContent: 'center', flex: 1, }, numbers: { fontSize: 30, color: '#31C283', fontWeight: 'bold', }, verticleLine: { height: '100%', width: 1, backgroundColor: '#909090', },

Hope that help:)