react-native - react native : How to add inline read more text to long truncated text

Question

我在 React Native App 中显示长字符串，我想将它显示为两行文本。使用 expo/react-native-read-more-text用于折叠/显示目的。这是可行的，但我想将“阅读更多”文本显示为内嵌同一行省略号。我该怎么做？

电流输出:



我想要这样的内联:



成分:

const TestScreen = () => {

  _renderTruncatedFooter = (handlePress) => {
    return (
      <Text style={{color: '#999'}} onPress={handlePress}>
        more
      </Text>
    );
  }
  return (
    <View style={styles.container}>
      <View style={styles.card}>
        <ReadMore
          numberOfLines={2}
          renderTruncatedFooter={this._renderTruncatedFooter}
        >
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
          enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea commodo consequat.  Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat
          nulla pariatur. Excepteur sint occaecat cupidatat non proident,
          sunt in culpa qui officia deserunt mollit anim id est laborumasd
          </ReadMore>
      </View>
    </View>
  );
};
export default TestScreen;

Answer 1

到目前为止，这几乎是我工作过的每个 React Native 应用程序中的一个要求。我终于有了一个解决方案，我已经开源了。

https://github.com/kashishgrover/react-native-see-more-inline

https://www.npmjs.com/package/react-native-see-more-inline

正如我在 repo 中提到的，

My motivation of building this was that I couldn't find any library/implementation that would place the "see more" link inline with the text. All the other implementations I found would place the link under the text. This package uses text width, and using a simple binary search it (almost) accurately calculates where it should place the "see more" link.

用法很简单:

import SeeMore from 'react-native-see-more-inline';

<SeeMore numberOfLines={2} style={fontStyle}>
  {VERY_LARGE_TEXT}
</SeeMore>

要准确计算文本的宽度，请记住明确传递字体样式:

fontStyle = { fontFamily: 'CustomFont', fontSize: 14, fontWeight: '300' }

我已尽最大努力使自述文件尽可能详细。继续尝试，并提供输入，以便我可以进一步改进实现。

这是它的样子: