1.高度需要动态添加，我这边是加载html字符串
meta：为了让字体和div宽度适应手机
ResizeImages：为了图片自适应屏幕宽度，根据需要调整，这边是整体图片都适应了，没判断超出或者小于
onNavigationStateChange：通过WebView的方法，动态加载高度
<View style={{ height: this.state.webViewHeight, width: ScreenWidth }}>
<WebView
source={{html:
`<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<body>
${this.state.detailInfo.DetailHtml}
<script>
function ResizeImages(){
var myimg;
for(i=0;i <document.images.length;i++){
myimg = document.images[i];
myimg.width = ${ScreenWidth - 20};
}
}
window.onload=function(){
ResizeImages()
window.location.hash = '#' + document.body.clientHeight;
document.title = document.body.clientHeight;
}
</script></body></html>`
}}
style={{flex:1}}
bounces={false}
scrollEnabled={false}
javaScriptEnabled={true}
automaticallyAdjustContentInsets={true}
contentInset={{top:0,left:0}}
onNavigationStateChange={(title) => {
console.log(title);
if (title.title != undefined) {
this.setState({
webViewHeight: (parseInt(title.title) + 20)
})
}
}}
/>
</View>
网友评论