React Native Text控件动态检测换行的方法

Posted 2023-05-10

参考技术A Text控件是React Native最常用的几个控件之一了，因为几乎没有哪个应用不使用文案展示功能的。在展示文案时，我们常常需要限定Text显示区域的宽度，而文本出现超长时，要么选择截断，要么选择换行。当选择换行时，我们要对换行做出一些响应，比如我们需要因此调整所在容器的高度等。本文就演示一下如何动态检测Text控件出现了换行。

参照以下步骤：

即主要借用了onlayout的回调。

当Text中存在子Text控件时，子Text会继承父Text的style和其他属性，但是子Text可以重写从父辈继承来的样式，却不能重写其他属性，如lineHeight, fontSize。

例如：

显示结果:

所以，在嵌套的状态下，我们只需要在父Text上设置好lineHeight, numberOfLines，并做好onLayout回调即可响应多行布局了。

React-Native：避免文本换行

【中文标题】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>;

【讨论】：

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