React Native解决WebView高度问题

最新推荐文章于 2023-08-09 21:17:37 发布

依旧00

最新推荐文章于 2023-08-09 21:17:37 发布

阅读量463

点赞数

分类专栏： react native android web 文章标签： react native javascript react.js webview

本文链接：https://blog.csdn.net/zhong1113/article/details/128779885

版权

android 同时被 3 个专栏收录

56 篇文章 1 订阅

订阅专栏

web

6 篇文章 0 订阅

订阅专栏

react native

3 篇文章 0 订阅

订阅专栏

	import { WebView } from 'react-native-webview'
	const [webViewContent, setWebViewContent] = useState(null)
	const [htmlHeight, setHtmlHeight] = useState(0)
	let HTML = `<html><head><meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"><style>video{width:100%}</style></head><body>${webViewContent}</body></html>`

							<WebView
							
								source={{ html: HTML }}
								automaticallyAdjustContentInsets={false}
								javaScriptEnabled={true}
								injectedJavaScript={`(function() {
                                  setTimeout(() => {
                                    window.ReactNativeWebView.postMessage(JSON.stringify(document.documentElement.clientHeight));
                                  }, 500)
                                })();`}
								onMessage={(e) => {
									if (e.nativeEvent.data == htmlHeight) return
									setHtmlHeight(e.nativeEvent.data)
								}}
								style={{ height: openDetail ? +htmlHeight : 0, marginTop: pTx(1) }}
							/>

之前遇到的场景是后台只返回了富文本的标签内容,导致加载出来的内容高度不正确,解决方法就是通过document.documentElement.clientHeight获取内容高度,然后返回给Reace native

依旧00

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React Native解决WebView高度问题

之前遇到的场景是后台只返回了富文本的标签内容,导致加载出来的内容高度不正确,解决方法就是通过document.documentElement.clientHeight获取内容高度,然后返回给Reace native
复制链接

扫一扫