ReactNative中将WebView放入ListView中高度自适应
Posted YanceChen2013
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ReactNative中将WebView放入ListView中高度自适应相关的知识，希望对你有一定的参考价值。
在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)
)
喜欢我的内容可以添加公众号给我留言，有问题我们一起交流学习！！！
以上是关于ReactNative中将WebView放入ListView中高度自适应的主要内容，如果未能解决你的问题，请参考以下文章
为啥 ReactNative 的性能比 WebView 好？如果他们使用相同的 Javascript Engine V8？
React Native 问题：WebView 已从 React Native 中移除
React Native：Webview getUserMedia 不起作用（onPermissionRequest 覆盖？）