我试图找到一种方法,有显示更多/更少的文本,如果有超过3行的文本.我已经尝试了react-show-more-text包,但它是非常错误的,所以我已经能够得到的最接近的是在这篇文章的顶部答案.主要问题是,如果有只有3行,其显示阅读更多/少文本也。它应该显示,如果真的会有另一行文字,当你点击按钮。我的代码。
import React, { useCallback, useState } from 'react';
import { Text } from 'react-native';
const ReadMoreText = ({ readMoreStyle, text, textStyle }) => {
const [textShown, setTextShown] = useState(false);
const [lengthMore, setLengthMore] = useState(false);
const toggleNumberOfLines = () => {
setTextShown(!textShown);
};
const onTextLayout = useCallback((e) => {
setLengthMore(e.nativeEvent.lines.length >= 3);
}, []);
return (
<>
<Text onTextLayout={onTextLayout} numberOfLines={textShown ? undefined : 3} style={textStyle}>
{text}
</Text>
{lengthMore ? (
<Text onPress={toggleNumberOfLines} style={readMoreStyle}>
{textShown ? 'Read Less' : 'Read More'}
</Text>
) : null}
</>
);
};
export default ReadMoreText;
字符串
3条答案
按热度按时间t3psigkw1#
问题是需要在状态中更新行数。我以前做的是每次都被覆盖到三行。
字符串
z0qdvdin2#
这是react native从来不关心的一个兔子洞。react native有一些选项,但即使是最受欢迎的也不是用 typescript 完成的,而且缺乏很多照顾。
所以我做了自己的解决方案:https://www.npmjs.com/package/@rntext/more-or-less
如果你尝试一下,让我知道它是否适合你的模型,如果不适合,也许如何改进它,我将不胜感激。
jjjwad0x3#
当我试图找到一种限制行数的方法时,我看了一下react-native
Text
组件,但允许文本扩展,尽管它可以将文本截断到您指定的行数,但它并不显示文本是否实际上被截断。这意味着您可以添加一个按钮来显示更多文本,但即使文本没有被截断(这似乎是您的问题),它也会显示出来。
如果可以接受基于字符数量的截断(而不是截断行数),则可以创建一个接受react元素(不需要只是字符串)的组件,解析输入,访问元素的子元素,直到达到字符串,然后计算字符串中的字符数量,在达到最大字符数量后截断并停止该过程。
下面是一个执行此操作的组件示例:
字符串
请记住,这个组件要求子组件包含最终文本(或者不包含文本)。它不会访问其他属性(如
text
或title
属性),它们将被忽略。您可以只在代码中包含此组件,添加按钮以显示更多或更少的文本,然后根据需要设置按钮的样式。
如果您不想在项目中维护组件代码,我创建了一个库来完成此任务。
使用以下各项安装库:
型
下面是如何使用该库的示例:
型
您可以看到here网络演示和here本地演示。“