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

Answer 2

可能以下解决方案应该满足您的需求

 return (
        <View style={{flexDirection: 'row', flex: 1, justifyContent: 'space-around', marginTop: 50}}>
            <Text numberOfLines={2} style={{fontSize: 16, flex: 1}}>{title}</Text>
            <Text style={{fontSize: 13, marginTop: 2}}>{duration}</Text>
        </View>
    );

请检查并让我知道如果不起作用。