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

一键写代码

已于 2022-01-28 16:16:31 修改

阅读量3.5k

点赞数 1

分类专栏： vue react-native 前端技术积累文章标签： webview react.js javascript

于 2022-01-28 16:14:50 首次发布

本文链接：https://blog.csdn.net/qq_42991509/article/details/122732883

版权

前端技术积累同时被 3 个专栏收录

160 篇文章 9 订阅

订阅专栏

vue

89 篇文章 7 订阅

订阅专栏

react-native

6 篇文章 0 订阅

订阅专栏

我们知道，在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

一键写代码

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react-native中使用webview来渲染富文本，修改样式，自适应高度

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

扫一扫