React Native WebView控件加载HTML标签内容适配图片大小

最新推荐文章于 2022-08-29 18:35:44 发布

Coding_Physical

最新推荐文章于 2022-08-29 18:35:44 发布

阅读量932

点赞数

分类专栏：移动开发布局文章标签： React Native WebView HTML

本文链接：https://blog.csdn.net/Coding_Physical/article/details/103741866

版权

移动开发布局专栏收录该内容

5 篇文章 0 订阅

订阅专栏

背景:最近在折腾RN开发遇到需要加载HTML文件内容遇到图片加载不适配屏幕,接下来就在这里做出一些总结

在RN中控件的声明和属性填充和OC语法很不一样,一开始接触觉得很诡异,还有这样的操作,不过JS语法在布局方面的确比OC快捷许多,就好比我遇到的webview控件一样,originWhitelist={['*']}这个属性原文解释为List of origin strings to allow being navigated to.我的理解是列举了哪些源字符串可以被导航.scalesPageToFit这是属性网页自动适配屏幕大小;automaticallyAdjustContentInsets自动适配内容

将后台返回的HTML标签内容组装成一个完整的HTML 文件就可以满足需求加载出来

总结:非常感谢安卓的同事给我一些建议,遇到问题不要一个人独自蒙头去研究需要和他人一起讨论或许下一秒就可以解决问题

最后附上关键代码

var stringHead = '<html> <head><style type="text/css">p {color:black;font-size:30s}</style><meta http-equiv="Content-Type" charset=utf-8"><meta http-equiv="Content-Style-Type" content="text/css"><meta name="Generator" content="Cocoa HTML Writer"><meta name="viewpoint" content="width=device-width, initail-scale=0.01" ><style>img{max-width: 100%; width:auto; height:auto;}</style></head><body bgcolor=#FFFFFF>'

var stringTail = '</body></html>'

<WebView

originWhitelist={['*']}

style={{flex:1}}

bounces={true}

scalesPageToFit={true}

scrollEnabled={true}

automaticallyAdjustContentInsets={true}

source={{html:stringHead+this.state.data+stringTail}}

</WebView>

参考文献:

https://reactnative.cn/docs/webview.html#docsNav