[英]Show More/ Less Text in React Native
如果文本超过 3 行,我正在尝试找到一种显示更多/更少文本的方法。 我已经尝试过react-show-more-text package 但它非常有问题,所以我能得到的最接近的是这篇文章中的最佳答案。 主要问题是,如果只有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;
问题是 state 中的行数需要更新。 与我之前所做的一样,它每次都被覆盖为三个。
const ReadMoreText = ({ readMoreStyle, text, textStyle }) => {
const [showMoreButton, setShowMoreButton] = useState(false);
const [textShown, setTextShown] = useState(false);
const [numLines, setNumLines] = useState(undefined);
const toggleTextShown = () => {
setTextShown(!textShown);
};
useEffect(() => {
setNumLines(textShown ? undefined : 3);
}, [textShown]);
const onTextLayout = useCallback(
(e) => {
if (e.nativeEvent.lines.length > 3 && !textShown) {
setShowMoreButton(true);
setNumLines(3);
}
},
[textShown],
);
return (
<>
<Text onTextLayout={onTextLayout} numberOfLines={numLines} style={textStyle} ellipsizeMode="tail">
{text}
</Text>
{showMoreButton ? (
<Text onPress={toggleTextShown} style={readMoreStyle}>
{textShown ? 'Read Less' : 'Read More'}
</Text>
) : null}
</>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.