Question

我想实现类似这样的东西

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

Answer 1

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

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

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

1 个答案: