ReactNative中将WebView放入ListView中高度自适应

淩亂°似流年 2022-06-10 07:49 195阅读 0赞

在ReactNative项目中可能会遇到展示HTML代码的情况，通常我们会采用WebView来展示html代码。有时候在ReactNative中我们不需要设置WebView的高度，这只是在一般的View界面中，但是当我们在ListView中展示WebView的时候就需要设定高度才能展示出来，因此需要用js来计算文档高度做到高度自适应。  
在项目中遇到的问题是没有设置WebView的高度，在iOS中可以自适应高度，但是在安卓中高度不能使用，特此记录一下，希望可以帮到遇到同样问题的你们。

#### 获取到body体中的代码以及样式等内容 ####

fetch(url_api)
            .then((response) => response.json()) .then((responseData)=>{ console.log('艺术家详情',responseData); var allData = responseData['data']; console.log('艺术家详情',allData); //获取文本 var textHtml = allData['text']; // console.log(textHtml); //拿到图片数据 if (allData['img'].length > 0) { for (var i = 0; i < allData['img'].length; i++) { var imgSrc = allData['img'][i]; var imgHtml = '<img src="' + imgSrc + '" width="100%">'; //替换占位符 textHtml = textHtml.replace('<IMG>', imgHtml); } // console.log(textHtml); } var detailArray = [1]; // 更新状态机 this.setState({ detailData: textHtml, cover: allData['cover'], dataSource: this.state.dataSource.cloneWithRows(detailArray), }); }) },

#### 将body体中的内容赋值给WebView的source ####

//计算内容高度
    source={
       {html: `<!DOCTYPE html><html><body>${this.state.detailData}<script>window.onload=function(){ window.location.hash = 1;document.title = document.body.clientHeight;}</script></body></html>` }}

#### 通过WebView中的onNavigationStateChange属性进行高度的改变，通过更改属性值进行高度的改变 ####

onNavigationStateChange={
       (title)=>{
              if(title.title != undefined) {
                this.setState({
                  htmlHeight:(parseInt(title.title)+10)
                })
              }
            }}

喜欢我的内容可以添加公众号给我留言，有问题我们一起交流学习！！！  
![这里写图片描述][SouthEast]

[SouthEast]: /images/20220610/b2096e32cfcb49888218ba652ab9b585.png

发表评论取消回复

表情：

评论列表（有 0 条评论，195人围观）

还没有评论，来说两句吧...

相关阅读

相关 iOS【终极方案】精准获取webView内容高度，自适应高度

关于WebView内容高度的获取，相信很多人都踩过坑，无法获取到准确高度，导致页面布局出现差错，搜到的资料很多但都无法解决问题，以下是个人经验总结：项目需求实现H5文章&

快来打我*/ 2023年10月17日 17:27/ 0 赞/ 61 阅读

相关 linux的web界面自适应,Android中Webview自适应屏幕

Android中Webview自适应屏幕实现的三种方法。第一种： WebSetting settings = webView.getSettings(); settin

迈不过友情╰/ 2023年01月20日 15:59/ 0 赞/ 247 阅读

相关 ReactNative H5 页面显示 react-native-webview 高度自适应

安装包 react-native-webview 简单示例 import React from 'react' import WebView fr

柔情只为你懂/ 2022年12月12日 04:51/ 0 赞/ 211 阅读

相关 Android 中Webview 自适应屏幕

webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomControls(false); //隐藏webview缩放按钮让Webv

以你之姓@/ 2022年08月13日 17:41/ 0 赞/ 230 阅读

相关总结iframe高度自适应，自适应子页面高度

在网上找了很多iframe的高度自适应，发现很多兼容性都不是很好，于是自己总结了一下。页面html节点上要有 <!DOCTYPE html PUBLIC "-//W3C

怼烎@/ 2022年07月24日 10:07/ 0 赞/ 307 阅读

相关 ReactNative中将WebView放入ListView中高度自适应

在ReactNative项目中可能会遇到展示HTML代码的情况，通常我们会采用WebView来展示html代码。有时候在ReactNative中我们不需要设置WebView的高

淩亂°似流年/ 2022年06月10日 07:49/ 0 赞/ 196 阅读

相关 Android 中Webview 自适应屏幕

webview中右下角的缩放按钮能不能去掉 settings.setDisplayZoomControls(false); //隐藏webview缩放按钮让Webv

野性酷女/ 2022年05月14日 00:09/ 0 赞/ 295 阅读

相关 ReactNative之Image组件自适应高度，图片自适应大小

因为在现在0.50包括之前的ReactNative版本，Image组件必须要设置宽高才能显示。所以在图片宽高不确定的情况下，如何来让图片自适应屏幕高度呢？需求原因：因为

一时失言乱红尘/ 2022年04月22日 13:44/ 0 赞/ 1296 阅读

相关 layui中iframe自适应高度

layui中iframe自适应页面高度 // 窗口自适应 $(window).on('resize', function() { Admin

傷城~/ 2022年02月24日 12:44/ 0 赞/ 762 阅读

相关高度自适应

开发中遇到一个问题，要求不管在多高的屏幕下，图片(什么都行)到底部的距离都应该和psd一致，flash里面的问题 ![70][] //定义宽度 var psdWidth

约定不等于承诺〃/ 2021年09月16日 06:40/ 0 赞/ 506 阅读