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

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

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

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

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

最后附上关键代码

var stringHead = ' '

var stringTail = ''

originWhitelist={['*']}

style={{flex:1}}

bounces={true}

scalesPageToFit={true}

scrollEnabled={true}

automaticallyAdjustContentInsets={true}

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

>

参考文献:

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

https://reactnative.cn/docs/webview/#originwhitelist

https://reactnative.cn/docs/webview/#scalespagetofit

https://reactnative.cn/docs/webview/#automaticallyadjustcontentinsets