react-native渲染html字符串

最新推荐文章于 2024-06-20 09:36:34 发布

花程序媛

最新推荐文章于 2024-06-20 09:36:34 发布

阅读量3.3k

点赞数

本文链接：https://blog.csdn.net/shizhihua11/article/details/88932742

版权

本文探讨了在React-Native应用中如何正确渲染包含图片的HTML字符串。传统方法如react-native-htmlview无法适应图片显示，但通过使用WebView可以解决这一问题，实现完整HTML内容的展示。

摘要由CSDN通过智能技术生成

之前查到react-native-htmlview，可以正常显示没有图像的文本，但是不能自适应显示图片

最后找到解决方法，用webView

render() {
       const BaseScript = `
        (function () {
            var height = null;
            function changeHeight() {
              if (document.body.scrollHeight != height) {
                height = document.body.scrollHeight;
                if (window.postMessage) {
                  window.postMessage(JSON.stringify({
                    type: 'setHeight',
                    height: height,
                  }))
                }
              }
            }
            setTimeout(changeHeight, 300);
        } ())
        `;
      return(
            <WebView
                  source={
  {html:content,baseUrl:''}}//必须加baseUrl 否则在低版本的android系统会报错
                  injectedJavaScript={BaseScript}//设置高度 被内容撑开
                  automaticallyAdjustContentI