React-Native WebView 测量网页高度

React-Native（后面简称RN）在展示某些静态也页面的时候，可能需要使用WebView， WebView可以请求一个网页地址，也可以异步请求HTML文本。一般情况下我们要得到网页的宽高，传回给RN以便准确设置WebView展示宽高

原文地址（转载需注明出处）

大致步骤

使用WebView的injectedJavaScript属性注入JS代码，进行测量网页的宽高
设置WebView的宽高

PS：是不是很简单？哈哈哈~

先来介绍下`injectedJavaScript`

The injectedJavaScript is a custom prop of the React native Webview component. You can pass any JavaScript code ( as string ) to this prop, and React native will inject this JavaScript code into the Webview. The injected JavaScript will get executed once the Webview is finished loading.转自(可能需要科学上网)

injectedJavaScript属性让注入的代码在WebView loaded时候运行一次，并只运行一次，除非你重新加载一次webView。

这个属性常用的用两种场景：

修改HTML部分属性，比如标签的颜色、字体大小什么的

    // 修改了标签id为`myContent`的背景颜色

changeProp.png

注入一些方法，做测量或者其他交互。

这个一般是需要WebView的onMessage方法配合使用

import React, { Component } from 'react'
import {
  WebView,
  Dimensions,
  ScrollView
} from 'react-native'

const BaseScript =
    `
    (function () {
        var height = null;
        function changeHeight() {
          if (document.body.scrollHeight != height) {
            height = document.body.scrollHeight;
            if (window.postMessage) {
              window.postMessage(JSON.stringify({
                type: 'setHeight',
                height: height,
              }))
            }
          }
        }
        setInterval(changeHeight, 100);
    } ())
    `

class RZWebView extends Component {
  constructor (props) {
    super(props)
    this.displayName = 'RZWebView'
    this.state = ({
      height: 0
    })
  }

  /**
   * 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 (
      
        
      
    )
  }
}

RZWebView.navigationOptions = {
  headerTitle: 'RZWebView'
}

export default RZWebView

WebView.gif

额外补充：WebView 加载URI

RN中WebView都是原生控件，对网页的支持也是挺好的。直接代码了：

import React, { Component } from 'react'
import {
  View,
  WebView,
  Dimensions
} from 'react-native'

class RZWebView extends Component {
  constructor (props) {
    super(props)
    this.displayName = 'RZWebView'
  }

  render () {
    return (
      
        
      
    )
  }
}

RZWebView.navigationOptions = {
  headerTitle: 'RZWebView'
}

export default RZWebView

loadUri.png

本文所使用的HTML

    const HTMLTEXT = `大佬让测试商品详情页样式啊。。
这个怎么说呢。。
样式还是需要解析的啊。。
如果乱了会被运营打的啊。。
运营也会死的很惨啊。。
所以让我们试一下吧。。
如果还是不行。。
就拿开发祭天。。
不然。。
还能怎么样呢。。
![1504250661662096451.png](http://upload-images.jianshu.io/upload_images/2072073-f0ba8cd8b60cf0ab.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
再来一遍！！！
大佬让测试商品详情页样式啊。。
这个怎么说呢。。
样式还是需要解析的啊。。
如果乱了会被运营打的啊。。
运营也会死的很惨啊。。
所以让我们试一下吧。。
如果还是不行。。
就拿开发祭天。。
不然。。
还能怎么样呢。。



`

Over,不对的地方欢迎留言指正