Question

我试图找到一种方法，如果文本多于3行，则显示更多/更少的文本。我已经尝试过react-show-more-text程序包，但是它有很多错误，因此我能获得的最接近的答案是this post.中的最佳答案主要问题是，如果只有 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;

Answer 1

问题是行数需要在状态下更新。按照我之前的做法，每次都被覆盖为三。

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

在React Native中显示更多/更少的文本

1 个答案: