React Native之网页高度计算

有时候需要展示后台传过来的编辑过的文本，一般是返回html标签样式的代码，这里直接使用WebView很方便，但是我们需要自己获取网页高度

const BaseScript =
    `
    (function () {
        var height = 0;
            height = document.body.scrollHeight;
              window.postMessage(JSON.stringify({
                type: 'setHeight',
                height: height,
              }))
    } ())
    `
const HTMLCONTENT = `<h1>This is a very simple HTML!</h1>
    <img src="https://img.haomeiwen.com/i1962618/75f3a7a75762af83.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/642" />`


export default class App extends Component<Props> {
  constructor(props){
    super(props)
    this.state = {
      height:10,
    }
  }
  /**
   * web端发送过来的交互消息
   */
  onMessage (event) {
    try {
      const action = JSON.parse(event.nativeEvent.data)
      if (action.type === 'setHeight' && action.height > 0) {
        this.setState({ height: action.height })
      }
    } catch (error) {
      // pass
    }
  }

  render() {
    return (
      <View style={{flex:1,marginTop:60}}>        
           <WebView
            style={{
              width: 375-30,
              marginHorizontal:15,
              height: this.state.height
            }}
            originWhitelist={['*']}
            automaticallyAdjustContentInsets
            source={{ html: HTMLCONTENT ,baseUrl:''}}// 这里可以使用uri            
            decelerationRate='normal'
            scalesPageToFit={false}//是否允许缩放
            injectedJavaScript={BaseScript}//JS注入
            javaScriptEnabled={true} // 仅限Android平台。iOS平台JavaScript是默认开启的。
            scrollEnabled={false}
            onMessage={this.onMessage.bind(this)}
           />
      </View>
    );
  }
}

WX20190101-233251@2x.png