react-native中使用webview来渲染富文本，修改样式，自适应高度

我们知道，在vue中，我们可以很轻松的去渲染富文本内容。包括在小程序中也有对应的组件可以直接使用。那么，在react-native中如何渲染富文本呢？答案是： Webview废话不多说，直接上代码。export default class ArticleDetailPage extends Component {constructor(props) {super(props);this.state

一键写代码

3680人浏览 · 2022-01-28 16:14:50

一键写代码 · 2022-01-28 16:14:50 发布

我们知道，在vue中，我们可以很轻松的去渲染富文本内容。包括在小程序中也有对应的组件可以直接使用。

那么，在react-native中如何渲染富文本呢？

答案是： Webview

废话不多说，直接上代码。


import React, { Component } from 'react';
import {
  View,
  Image,
  Text,
  StyleSheet,
  Dimensions,
  TouchableOpacity,
} from 'react-native';

import { WebView } from 'react-native-webview';

export default class ArticleDetailPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '',
      content: '',
      webViewHeight: 0 // webview高度，动态计算得出
    };
  }

  componentDidMount() {
    const { id = '' } = this.props.route.params
    this.fetchDetail(id)
  }

  fetchDetail(id) {
    getArticleDetail({ articleId: Number(id) }).then(res => {
      this.setState({
        title: res.data.title,
        content: res.data.content
      })
    }).catch(err => {
      console.log(err)
    })
  }

  // 根据内容动态计算 webview的高度
  onWebViewMessage = (e) => {
    // console.log('----------e', e)
    this.setState({ webViewHeight: Number(e.nativeEvent.data) });
  }

  render() {
    const { title, content} = this.state

    const BaseScript = `
    (function () {
        var height = null;
        function changeHeight() {
          if (document.body.scrollHeight != height) {
            height = document.body.scrollHeight;
            if (window.postMessage) {
              window.ReactNativeWebView.postMessage(height)
            }
          }
        }
        setTimeout(changeHeight, 300);
    } ())
    `;

    const htmlContent = `
      <html>
        <head>
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <style>
            p{
              text-indent: 2em;
            }
          </style>
        </head>
        <body>
        ${content}
        </body>
      </html>
    `
    return (
      <ScrollView style={{ flexDirection: 'column', flex: 1, backgroundColor: '#ffffff' }}>
        <Text style={styles.articleTitle}>{title}</Text>
        <View style={[styles.articleContent, { height: this.state.webViewHeight, marginTop: 10, paddingHorizontal: 5 }]}>
          <WebView
            source={{ html: htmlContent, baseUrl: '' }}
            injectedJavaScript={BaseScript}
            automaticallyAdjustContentInsets={false}
            javaScriptEnabled={true}
            decelerationRate="normal"
            startInLoadingState={true}
            onMessage={this.onWebViewMessage}
          />
        </View>
      </ScrollView>
    );
  }
}

其中，接口返回的数据为：

{
content: "<p><span style="font-size: 14pt;">&nbsp; &nbsp; 努力，从不会白费。</span></p>↵<p><span style="font-size: 14pt;">&nbsp; &nbsp; =现在回头看，一切努力是不算白费的。</span></p>↵<p><span style="font-size: 14pt;">&nbsp; &nbsp; 我是其他内容。</span></p>↵<p>&nbsp;</p>↵<p></p>",
title:'我是文字标题'
}

我们可以在htmlContent中写css样式来控制富文本内容。

大家也可以参考这篇文章: https://blog.csdn.net/shizhihua11/article/details/88932742

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^