React-Native（后面簡稱RN）在展示某些靜態(tài)也頁面的時候茁瘦，可能需要使用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>就拿開發(fā)祭天。宽涌。</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>就拿開發(fā)祭天赁酝。。</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>就拿開發(fā)祭天公般。。</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>就拿開發(fā)祭天橄登。。</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端發(fā)送過來的交互消息
*/
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
