React-Native WebView 测量网页高度

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

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

大致步骤

1. 使用WebView的injectedJavaScript属性注入JS代码，进行测量网页的宽高
2. 设置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部分属性，比如标签的颜色、字体大小什么的

const HTMLTEXT = `
大佬让测试商品详情页样式啊。。
这个怎么说呢。。
样式还是需要解析的啊。。
如果乱了会被运营打的啊。。
运营也会死的很惨啊。。
所以让我们试一下吧。。
如果还是不行。。
就拿开发祭天。。
不然。。
还能怎么样呢。。
再来一遍！！！
大佬让测试商品详情页样式啊。。
这个怎么说呢。。
样式还是需要解析的啊。。
如果乱了会被运营打的啊。。
运营也会死的很惨啊。。
所以让我们试一下吧。。
如果还是不行。。
就拿开发祭天。。
不然。。
还能怎么样呢。。



`

    // 修改了标签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);
    } ())
    `

const HTMLTEXT = `
大佬让测试商品详情页样式啊。。
这个怎么说呢。。
样式还是需要解析的啊。。
如果乱了会被运营打的啊。。
运营也会死的很惨啊。。
所以让我们试一下吧。。
如果还是不行。。
就拿开发祭天。。
不然。。
还能怎么样呢。。
再来一遍！！！
大佬让测试商品详情页样式啊。。
这个怎么说呢。。
样式还是需要解析的啊。。
如果乱了会被运营打的啊。。
运营也会死的很惨啊。。
所以让我们试一下吧。。
如果还是不行。。
就拿开发祭天。。
不然。。
还能怎么样呢。。



`

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

---