react-native-webview 高度自適應

移動端例如安卓的webview是會根據高度自己撐開的，但是RN 卻不會，所以怎麼辦呢？
2個辦法
最簡單的：使用react-native-autoheight-webview
如何使用：

如果你是RN大於等於 0.59
npm install react-native-autoheight-webview --save (rn >= 0.59, be capable of Hooks)
在0.57到0.59
npm install [email protected] --save (0.57 <= rn < 0.59)

然後 link下
react-native link react-native-webview


特別提示：如果你還沒有安裝react-native-webview
那麼再這之前你需要
npm i react-native-webview
然後
react-native link react-native-webview

然後使用方法：

import AutoHeightWebView from 'react-native-autoheight-webview'
<AutoHeightWebView
                    // originWhitelist={['*']}
                    style={{flex:1}}
                    javaScriptEnabled={true}
                    source={{html: text}}
                    scalesPageToFit={false}
                    onMessage={this.onMessage}
                />

第二種方法：使用js代碼注入獲取高度，然後動態設置高度

這是注入的JS  只要高度獲取 設置下面一個
const INJECTEDJAVASCRIPT = `
  //這是縮放的
  const meta = document.createElement('meta'); 
  meta.setAttribute('content', 'initial-scale=0.5, maximum-scale=0.5, user-scalable=0'); 
  meta.setAttribute('name', 'viewport'); 
  document.getElementsByTagName('head')[0].appendChild(meta); 
  //高度獲取
  //let webHeight = document.body.getBoundingClientRect().height;
  let webHeight = document.body.scrollHeight;
  window.ReactNativeWebView.postMessage("H"+webHeight);
`;

然後使用
<WebView
                    style={{width: '100%', height: this.state.webHeight}}
                    javaScriptEnabled={true}
                    source={{html: text}}
                    injectedJavaScript={INJECTEDJAVASCRIPT}
                    scalesPageToFit={false}
                    onMessage={this.onMessage}
                />
然後設置高度
onMessage = (msg) => {
        if (msg.nativeEvent.data !== undefined && msg.nativeEvent.data !== null) {
            this.setState({
                    webHeight: parseInt(height)
            });
        }
    }

目前好用的就這兩個 ，說一下爲何要設置縮放，因爲不設置 字體在手機上顯示特別小，不適合用戶觀看

感覺有用就點個贊吧。。。