React Native：如何将内联阅读更多文本添加到长截断文本中

Question

我在 React Native 应用程序中显示长字符串，我想将其显示为两行文本。使用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

正如我在回购协议中提到的，

我构建这个的动机是我找不到任何库/实现可以将“查看更多”链接与文本内联。我发现的所有其他实现都会将链接放置在文本下方。该包使用文本宽度，并使用简单的二分搜索（几乎）准确地计算应放置“查看更多”链接的位置。

用法非常简单：

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

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

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

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

我已尽力使自述文件尽可能详细。继续尝试，并提供意见，以便我可以进一步改进实施。

它看起来是这样的：