React-Native WebView 测量网页高度
2018-04-25 本文已影响11人
keyuan0214
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部分属性，比如标签的颜色、字体大小什么的
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:https://img.haomeiwen.com/i6652326/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:https://img.haomeiwen.com/i3510198/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:https://img.haomeiwen.com/i6652326/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:https://img.haomeiwen.com/i3510198/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
