任征的个人博客
0%

React-Native WebView 测量网页高度

Posted on Edited on In
Symbols count in article: 15k Reading time ≈ 14 mins.

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部分属性，比如标签的颜色、字体大小什么的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const HTMLTEXT = `<p id="myContent" style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(247, 150, 70); font-size: 36px;"><strong>大佬让测试商品详情页样式啊。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(75, 172, 198);"><strong>这个怎么说呢。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(128, 100, 162);"><strong>样式还是需要解析的啊。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"><strong>如果乱了会被运营打的啊。。<img width="100%" src="http://upload-images.jianshu.io/upload_images/6652326-afa4c73c7fca32ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" title="1505131159299088793.jpeg" alt="photo-1457365050282-c53d772ef8b2.jpeg"/></strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(192, 80, 77);"><strong>运营也会死的很惨啊。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(79, 129, 189);"><strong>所以让我们试一下吧。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(31, 73, 125);"><strong>如果还是不行。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(146, 205, 220);"><strong>就拿开发祭天。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(178, 162, 199);"><strong>不然。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(217, 150, 148);"><strong>还能怎么样呢。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb（155, 187, 89）;"><strong><img width="100%" src="http://a.36krcnd.com/nil_class/277e5abe-2f40-41a5-b465-173a551c8d63.jpg" title="1504250661662096451.png" alt="首页banner2.png"/></strong></span></p><p><span style="font-family: 宋体, SimSun; color: rgb（155, 187, 89）;"></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb（227, 108, 9）;"><strong>再来一遍！！！</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb（227, 108, 9）;"></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(247, 150, 70);"><strong>大佬让测试商品详情页样式啊。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(75, 172, 198);"><strong>这个怎么说呢。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(128, 100, 162);"><strong>样式还是需要解析的啊。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"><strong>如果乱了会被运营打的啊。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(192, 80, 77);"><strong>运营也会死的很惨啊。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(79, 129, 189);"><strong>所以让我们试一下吧。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(31, 73, 125);"><strong>如果还是不行。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(146, 205, 220);"><strong>就拿开发祭天。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(178, 162, 199);"><strong>不然。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(217, 150, 148);"><strong>还能怎么样呢。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb（155, 187, 89）;"></span><br/></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb（155, 187, 89）;"><strong><img width="100%" src="http://upload-images.jianshu.io/upload_images/3510198-c80fd2d06a801e33.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" title="1504250722330056753.png" alt="通栏1.png"/></strong></span></p><p><span style="font-family: 宋体, SimSun; color: rgb（155, 187, 89）;"><strong><br/></strong></span><br/></p>`
	
	// 修改了标签id为`myContent`的背景颜色
		<WebView
          injectedJavaScript={`
        document.querySelector('#myContent').style.backgroundColor = 'red';
    `}
          style={{
            width: Dimensions.get('window').width,
            height: this.state.height
          }}
          automaticallyAdjustContentInsets
          source={{ html: HTMLTEXT }}
          decelerationRate='normal'
       />

orientation-eight-values

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
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 = `<p id="myContent" style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(247, 150, 70); font-size: 36px;"><strong>大佬让测试商品详情页样式啊。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(75, 172, 198);"><strong>这个怎么说呢。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(128, 100, 162);"><strong>样式还是需要解析的啊。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"><strong>如果乱了会被运营打的啊。。<img width="100%" src="http://upload-images.jianshu.io/upload_images/6652326-afa4c73c7fca32ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" title="1505131159299088793.jpeg" alt="photo-1457365050282-c53d772ef8b2.jpeg"/></strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(192, 80, 77);"><strong>运营也会死的很惨啊。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(79, 129, 189);"><strong>所以让我们试一下吧。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(31, 73, 125);"><strong>如果还是不行。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(146, 205, 220);"><strong>就拿开发祭天。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(178, 162, 199);"><strong>不然。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(217, 150, 148);"><strong>还能怎么样呢。。</strong></span></p><p style="text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb（155, 187, 89）;"><strong><img width="100%" src="http://a.36krcnd.com/nil_class/277e5abe-2f40-41a5-b465-173a551c8d63.jpg" title="1504250661662096451.png" alt="首页banner2.png"/></strong></span></p><p><span style="font-family: 宋体, SimSun; color: rgb（155, 187, 89）;"></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb（227, 108, 9）;"><strong>再来一遍！！！</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb（227, 108, 9）;"></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(247, 150, 70);"><strong>大佬让测试商品详情页样式啊。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(75, 172, 198);"><strong>这个怎么说呢。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(128, 100, 162);"><strong>样式还是需要解析的啊。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(155, 187, 89);"><strong>如果乱了会被运营打的啊。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(192, 80, 77);"><strong>运营也会死的很惨啊。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(79, 129, 189);"><strong>所以让我们试一下吧。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(31, 73, 125);"><strong>如果还是不行。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(146, 205, 220);"><strong>就拿开发祭天。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(178, 162, 199);"><strong>不然。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb(217, 150, 148);"><strong>还能怎么样呢。。</strong></span></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb（155, 187, 89）;"></span><br/></p><p style="white-space: normal; text-align: center;"><span style="font-family: 宋体, SimSun; color: rgb（155, 187, 89）;"><strong><img width="100%" src="http://upload-images.jianshu.io/upload_images/3510198-c80fd2d06a801e33.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" title="1504250722330056753.png" alt="通栏1.png"/></strong></span></p><p><span style="font-family: 宋体, SimSun; color: rgb（155, 187, 89）;"><strong><br/></strong></span><br/></p>`

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 (
      <ScrollView>
        <WebView
          injectedJavaScript={BaseScript}
          style={{
            width: Dimensions.get('window').width,
            height: this.state.height
          }}
          automaticallyAdjustContentInsets
          source={{ html: HTMLTEXT }}
          decelerationRate='normal'
          scalesPageToFit
          javaScriptEnabled // 仅限Android平台。iOS平台JavaScript是默认开启的。
          domStorageEnabled // 适用于安卓
          scrollEnabled={false}
          onMessage={this.onMessage.bind(this)}
        />
      </ScrollView>
    )
  }
}

RZWebView.navigationOptions = {
  headerTitle: 'RZWebView'
}

export default RZWebView


orientation-eight-values

额外补充：WebView 加载URI

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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 (
      <View style={{
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height - 64
      }}>
        <WebView
          automaticallyAdjustContentInsets
          source={{ uri: 'https://rzrobert.github.io/' }}
          decelerationRate='normal'
          scalesPageToFit
          javaScriptEnabled // 仅限Android平台。iOS平台JavaScript是默认开启的。
          domStorageEnabled // 适用于安卓
          scrollEnabled
        />
      </View>
    )
  }
}

RZWebView.navigationOptions = {
  headerTitle: 'RZWebView'
}

export default RZWebView

orientation-eight-values

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