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

Question

我正在使用react-native渲染html包。现在我面临一个问题，我必须在react native中实现对html内容的阅读更多和更少的功能。我知道 read more and less 包仅适用于文本。因此，有任何方法可以实现通过 read more and less 行为渲染 html 内容的解决方案

Answer 1

您可以轻松地将这两个包组合起来。您可以使用 for read more/less 包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

我希望我能帮忙:)