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 react-native-autoheight-webview@1.0.1 --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)
            });
        }
    }

目前好用的就这两个 ，说一下为何要设置缩放，因为不设置 字体在手机上显示特别小，不适合用户观看

感觉有用就点个赞吧。。。