React Native ellipsizeMode - 2 文本在同一行答案

【问题标题】：React Native ellipsizeMode - 2 Text in same lineReact Native ellipsizeMode - 2 文本在同一行
【发布时间】：2018-02-02 19:03:54
【问题描述】：

我想实现这样的东西

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

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

情况2：如果文本不超过屏幕宽度

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

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

案例 1：好的，第一个文本是椭圆，旁边是 1234

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

案例2：不行，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 文本就在第一个文本旁边）？

【问题讨论】：

标签： android css reactjs react-native flexbox

【解决方案1】：

尝试将 flexShrink 设置为第一个文本样式？

<Text
   style={{
     ...otherStyles,
     flexShrink: 2
   }}
/>

【讨论】：