如何解决如何在React Native中获取截断的文本值?
当我们使用 numberOfLines 时,是否存在某种方法可以在RN中获取截断的文本?
例如:
组件
<Text style={{width: 50}} numberOfLines={3}>
Some very long text with tons of useful info
</Text>
输出
Some
very
long...
我想知道最终用户可以看到什么文字。有可能吗?
感谢您的帮助!
P.S。我尝试使用Ref功能获取内容,但其中包含带有全文的道具,因此无济于事
解决方法
您可以像这样使用onTextLayout道具。
e.nativeEvent.lines在文本中包含每一行,如果您具有文本和行数,则可以像下面一样使用此数组并查看每一行中的文本。在Android(不确定网络)中可以使用此功能。
export default function App() {
const text =
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
const lines = 3;
return (
<View style={{ flex: 1 }}>
<Text
onTextLayout={(e) => {
const shownText = e.nativeEvent.lines.slice(0,lines).map((line) => line.text).join('');
alert(shownText);
const hidenText = text.substring(shownText.length);
alert(hidenText);
}}
numberOfLines={lines}
onPress={this.toggleUser}>
{text}
</Text>
</View>
);
}
,
You can combine numberOfLines and width / flex prop to achieve this effect.
<Text numberOfLines={1} style={{ width: 100 }}>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,when an unknown
printer took a galley of type and scrambled it to mak
</Text>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。