时间戳

首页 > 解决方案 > 在 React Native 中显示更多/更少的文本

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

问题描述

如果文本超过 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;

标签： javascriptreact-native

解决方案

The issue is that the number of lines needs to be updated in state. With what I was previously doing it was being overwritten to three every time.

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

推荐阅读