javascript - React-Native:避免文本换行

Question

我在一行中显示了一首歌的标题及其持续时间。歌曲标题需要显示省略号，但持续时间不应换行或显示省略号。我尝试了几种组合，但未能使这种方法适合长标题。当名称显示省略号时，持续时间会离开屏幕，或者持续时间会换行。我无法在持续时间上硬编码固定宽度，因为它可以改变大小。

<View style={{flexDirection: 'row'}}>
    <Text numberOfLines={2} style={{fontSize: 16, textAlign: 'left'}}>{title}</Text>
    <Text style={{flex: 1, fontSize: 13, textAlign: 'right', marginTop: 2}}>{duration}</Text>
</View>

Answer 1

解决方案最终相当简单。并不完全直观，但以下是解决此问题的方法。看来需要省略号的文本需要 flex: 1。

 <View style={{ flexDirection: "row" }}>
<Text numberOfLines={1} style={{ flex: 1, textAlign: "left" }}>
    {title}
</Text>
<Text style={{ textAlign: "right" }}>{duration}</Text>
</View>;