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

可能在解决方案之下应该满足你的creteria

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

请参考React-Native: Avoid Text Wrapping了解更多详情，请忽略marginTop: 50，这是演示。

如果不起作用，请检查并告诉我。

React-Native：避免文字环绕

2 个答案: