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 
注入一些方法，做測量或者其他互動。
這個一般是需要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,不對的地方歡迎留言指正