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