React-Native:避免文字环绕

时间:2017-03-28 16:11:24

标签: layout react-native flexbox

我有一首歌的标题,其持续时间显示在一行中。歌曲标题需要显示省略号,但持续时间不应包裹或显示省略号。我尝试了几种组合,但未能使这项工作适用于长标题。当名称显示省略号或持续时间换行时,持续时间将离开屏幕。我无法在持续时间内对固定宽度进行硬编码,因为它可以改变大小。

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

2 个答案:

答案 0 :(得分:21)

解决方案最终变得相当简单。不完全直观,但在这里如何解决这个问题。看来需要省略号的文本需要flex: 1

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

答案 1 :(得分:1)

可能在解决方案之下应该满足你的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,这是演示。

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