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

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

  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 1

打赏作者

YanceChen2013

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值