html - 如何对 React Native 中使用的 html 内容使用阅读更多和更少的行为？

Question

我正在使用 react-native 渲染 html 包。现在我面临一个问题，我必须在 react native 中实现对 html 内容的阅读更多和更少的功能。 我知道 read more and less package work only for TEXT.So there are any way to reach solution for rendering html content with read more and less behavior

Answer 1

您可以轻松地组合这两个包。您可以使用 react-native-read-more-text 的包来阅读更多/更少，并使用 react-native-view-more-text 来显示任何 html 内容.

例如:

import HTML from 'react-native-render-html';
import ViewMoreText from 'react-native-view-more-text';

const htmlContent = `
                <h1>This HTML snippet is now rendered with native components !</h1>
                <h2>Enjoy a webview-free and blazing fast application</h2>
                <h2>Enjoy, This is a test 1</h2>
                <h2>Enjoy, This is a test 2</h2>
                <h2>Enjoy, This is a test 3</h2>
                <em style="textAlign: center;">Look at how happy this native cat is</em>
            `;

export default class Demo extends Component {
  renderViewMore(onPress){
    return(
      <Text onPress={onPress}>View more</Text>
    )
  }
  renderViewLess(onPress){
    return(
      <Text onPress={onPress}>View less</Text>
    )
  }
  render() {
    return ( 
    <ScrollView style = {{flex: 1}}>

     <ViewMoreText
      numberOfLines={3}
      renderViewMore={this.renderViewMore}
      renderViewLess={this.renderViewLess}
      textStyle={{textAlign: 'center'}}
      >
        HTML html = {htmlContent}
        imagesMaxWidth = {Dimensions.get('window').width}
        />
     </ViewMoreText>
    </ScrollView>
    );
  }
}

如果使用 numberOfLines 属性显示较少的文本，您可以轻松地给出行数，目前是 3 行。

这里是包的链接:

https://www.npmjs.com/package/react-native-view-more-text

https://github.com/archriss/react-native-render-html

我希望我能帮上忙:)