【React-native】WebView 高度和图片宽度自适应

774 阅读1分钟
import { WebView } from 'react-native-webview';

this.state = {
      webViewHeight: 0
}
onWebViewMessage = (event) => {
    this.setState({ webViewHeight: Number(event.nativeEvent.data) });
}

<WebView
              style={{//外层用scrollView需在本身设置宽高
                height: webViewHeight,
                width: '100%'
              }}
              originWhitelist={['*']} //加载html代码必须设置该属性,允许本地代码
              useWebKit
              userAgent="RNWebView"
              scalesPageToFit={Platform.OS === 'ios'}
              javaScriptEnabled
              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>
                ${mes.content}
                <script>
                function ResizeImages(){
                  var myimg;
                  for(i=0;i <document.images.length;i++){
                    myimg = document.images[i];
                    myimg.width = ${ScreenW - 20};
                  }
                }
                window.onload=function(){ 
                  ResizeImages()
                  window.location.hash = '#' + document.body.clientHeight;
                  document.title = document.body.clientHeight;
                }
                </script></body></html>`
              }}
              injectedJavaScript='window.ReactNativeWebView.postMessage(document.documentElement.scrollHeight)'
              onMessage={this.onWebViewMessage}
            />