React-Native WebView 測量網頁高度
阿新 • • 發佈:2019-01-30
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://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'
/>
注入一些方法,做測量或者其他互動。
這個一般是需要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 載入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
Over,不對的地方歡迎留言指正