React-Native WebView 测量网页高度

其他 2018-09-11 15:30:11 阅读次数: 0

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 = `<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'
       />

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 = `<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

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 (
      <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

loadUri.png

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

猜你喜欢

转载自blog.csdn.net/sinat_34194127/article/details/77991036
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022