在省略号后添加内联文本组件（阅读更多按钮）

Question

            <Text
              style={{ fontSize: 18, margin: 5 }}
              numberOfLines={message.length > characterLimit ? 3 : 0}
            >
              <Text>{message}</Text>
            </Text>
            <Touchable>
              <Text
                style={{
                  color: AppColors.tealC,
                }}
              >
                Read More
              </Text>
            </Touchable>
          </View>

问题就在上图中。我希望“阅读更多”与“...”显示在同一行

我尝试过很多解决方案。您可能想到的主要是将“显示更多”文本组件放在“消息”文本组件内，但是当我这样做时，由于 numberOfLines，它被省略号截断了。我也尝试过

flexWrap: 'wrap'

和

flexDirection: 'row'

如果能修复这个奇怪的问题，我们将不胜感激。我在其他线程中看到了类似问题的一些修复，但它们适用于网络应用程序，并且没有“numberOfLines”的解决方法。

Answer 1

我们可以使用一个小技巧，如果文本被截断，则将

Read more

按钮嵌套在文本组件内；如果文本未截断，则将其设置在文本组件外部。这使我们能够在视觉上将按钮保持在最后一行文本旁边。

我们可以通过使用状态来指示文本是否被截断来实现这一点。考虑以下最小示例。

const [isTruncated, setIsTruncated] = useState(true)

const ReadMore = () => {
    return (
      <Text onPress={() => setIsTruncated(!isTruncated)} style={{ color: "green" }}>
        {isTruncated ? "Read more" : " Read less"}
      </Text>
    )
}

<View style={{ padding: 20, flexDirection: "row" }}>
    <Text numberOfLines={isTruncated ? 1 : Number.MAX_SAFE_INTEGER} style={{ flex: 1 }}>
              This is a very very very very very very very very very very long text
       {!isTruncated && <ReadMore />}
    </Text>
    {isTruncated && <ReadMore />}
</View>

这是视图的初始状态。

这是按

Read more

后的视图。

Answer 2

我遇到了同样的问题，我找到了解决方案。

这是一个您可以集成的包SeeMoreLibrary

它解决了你的解决方案。这是我集成在我的应用程序中的代码。

import React from 'react';
import styles from './styles';
import {View} from 'react-native';
import Fonts from '../../utils/Fonts';
import ReadMore from '@fawazahmed/react-native-read-more';

const SeeMore = ({label, text, style, numberOfLines, seeMoreStyle, customStyle}) => {
  const capitalizeFirst = str => {
    return str?.charAt(0)?.toUpperCase() + str?.slice(1);
  };
  return (
    <View style={styles.root}>
      <ReadMore
        numberOfLines={numberOfLines ? numberOfLines : 2}
        style={
          style
            ? [style, styles.extrafont]
            : customStyle
            ? customStyle
            : [Fonts.style.default, styles.extrafont]
        }
        seeMoreStyle={seeMoreStyle ? seeMoreStyle : styles.btn}
        seeLessStyle={seeMoreStyle ? seeMoreStyle : styles.btn}
        seeLessText={'less'}
        seeMoreText={'more'}>
       {capitalizeFirst(label)}
      </ReadMore>
    </View>
  );
};
export default SeeMore;

了解更多信息可以访问套餐链接