React Native踩坑指南：WebView高度自適應

qiushijie發表於2019-04-03
React NativeWebView

webview使用100%高度等沒辦法自動填滿父容器，反而會因為一開始沒有渲染高度只有0，所以後面都看不到webview。webview必須指定一個高度，沒辦法自適應高度。通過注入js，監聽渲染後高度，然後回撥設定真正的100%高度回來，做到自適應。

新增高度state

state = {
    height: 0
}
複製程式碼

自適應

<WebView
  source={{html: `
    <!DOCTYPE html>
    <html>
        <body>
          ${html}
        </body>
        <script>
          window.onload = function() {
            // 回撥高度
            document.title = document.body.clientHeight;
          }
        </script>
      </body>
  `}}
  onNavigationStateChange={(event)=>{
    if(event.title != undefined) {
      console.log('event title', event.title);
      // 設定高度
      this.setState({
        height: parseInt(event.title)
      });
    }}}
/>
複製程式碼

相關文章