React-Native：避免文本换行

Posted 2023-03-07

【中文标题】React-Native：避免文本换行

【英文标题】：React-Native: Avoid Text Wrapping

【发布时间】：2017-08-21 19:52:49

【问题描述】：

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

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

【问题讨论】：

嗨 Anshul，如果我错了，请纠正我，你想显示持续时间并且它不应该换行并且它不应该显示省略号或者它不应该换行但它可以显示省略号？请说明您对时长文本的要求

是的，持续时间不应换行或显示省略号。标题可以显示省略号。

【参考方案1】：

以下解决方案可能满足您的要求

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

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

【参考方案2】：

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

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

【讨论】：

它对我不起作用。第一个文本消失。不知道为什么。也许行为已经改变。