React Native:如何将内联阅读更多文本添加到长截断文本中 [英] React Native: How to add inline read more text to long truncated text

问题描述

我在 React Native App 中显示长字符串，我想将其显示为两行文本.使用

我想要这样的内联:

组件:

const TestScreen = () =>{_renderTruncatedFooter = (handlePress) =>{返回 (<Text style={{color: '#999'}} onPress={handlePress}>更多的</文本>);}返回 (<视图样式={styles.container}><查看样式={styles.card}><阅读更多行数={2}renderTruncatedFooter={this._renderTruncatedFooter}>Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed doeiusmod tempor incididunt ut laboure et dolore magna aliqua.单位enim ad minim veniam, quis nostrud 练习 ullamco Laborisnisi ut aliquip ex ea commodo consequat.Duis aute irure dolorin reprehenderit in voluptate velit esse cillum dolore eu fugiat无效.例外 sint occaecat cupidatat non proident,Sunt in culpa qui officia deserunt mollit 动画 id est labourmasd</阅读更多></查看></查看>);};导出默认测试屏幕；

解决方案

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

I'm showing long string in React Native App and I want to show it as two lined text. Using expo/react-native-read-more-text for collapsing/revealing purposes. It's work but i want to show 'read more' text as inline with the same line of ellipsis. How can i do it?

Current output:

I want like this as inlined:

Component:

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;

解决方案

This has been a requirement in almost every React Native app that I have worked on so far. I finally have a solution, and I have open sourced it.

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

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

As I mentioned in the 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.

Usage is very simple:

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

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

To accurately calculate the width of the text, remember to explicitly pass font styles:

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

I have done my best to keep the readme as verbose as possible. Go ahead and try it, and do give inputs so that I can improve the implementation even more.

Here's what it looks like:

这篇关于React Native:如何将内联阅读更多文本添加到长截断文本中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！