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

来源：互联网发布：sublime js代码美化编辑：程序博客网时间：2024/04/30 11:34

在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)            })          }        }}

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

阅读全文

0 0