React Native ellipsizeMode - 同一行中的2个文本

Question

我想实现这样的东西

案例1：如果文本长于屏幕宽度

+--------------------------------------+
| very long teeeeeeeeeeeeeeeee.. (1234)|
+--------------------------------------+

情况2：如果文本不长于屏幕宽度

+--------------------------------------+
| short text (1234)                    |
+--------------------------------------+

但是现在我总是得到这样的结果：

案例1：好的，第一个是椭圆形，另一个是1234个

+--------------------------------------+
| very long teeeeeeeeeeeeeeeee.. (1234)|
+--------------------------------------+

情况2：不是ON，1234文本在屏幕右侧

+--------------------------------------+
| short text                     (1234)|
+--------------------------------------+

这是我现在的代码：

   <View style={{ flexDirection: 'row', alignItems: 'center' }}>
      <Text
        style={[styles.placeNameStyles, { flex: 1 }]}
        numberOfLines={1}
        ellipsizeMode='tail'
        onPress={() => this.props.onPlaceNamePress()}
      >
        {this.props.text}
      </Text>
      <Text style={styles.distanceStyles}>
          (1234)
      </Text>
    </View>

如果我从第一个文本中删除flex: 1我得到这样的东西：

案例1：不行，1234文字不在屏幕上

+--------------------------------------+
| very long teeeeeeeeeeeeeeeeeeeeeeee..|
+--------------------------------------+

案例2：好的，现在1234就在第一个文本旁边

+--------------------------------------+
| short text (1234)                    |
+--------------------------------------+

所以我的问题是我如何实现类似我的第一个例子（1234文本就在第一个文本旁边）？