獲取WebView內(nèi)容高度
通過注入js獲取網(wǎng)頁內(nèi)容高度，然后調(diào)用window.ReactNativeWebView.postMessage方法把高度回調(diào)給onMessage方法（此方法父組件的 style 中若使用到了 display 屬性獲取到的 height 會錯誤）
<WebView
injectedJavaScript={`
(function () {
function changeHeight() {
let height = 0;
if (document.documentElement && (document.documentElement.scrollHeight)) {
height = document.documentElement.scrollHeight;
} else if (document.body && (document.body.scrollHeight)) {
height = document.body.scrollHeight;
}
window.ReactNativeWebView.postMessage(JSON.stringify({
type: 'setHeight',
height: height,
}))
}
setTimeout(changeHeight, 300);
} ())
`}
style={{ height: autoHeight }}
originWhitelist={["*"]}
source={{ html: html }}
onMessage={(event) => {
try {
const action = JSON.parse(event.nativeEvent.data)
if (action.type === 'setHeight' && action.height > 0) {
this.setState({ autoHeight: action.height })
}
} catch (error) {
// pass
}
}}
/>
在 Android 上 ScrollView 嵌套 WebView 滑動手勢問題
在某些情況下需要在 ScrollView 中嵌套 WebView 且 WebView 需要滾動，這在iOS上沒有問題，但在 Android 上 ScrollView 會攔截滑動手勢
可以通過在 WebView 觸發(fā)手勢的時候禁止外層 ScrollView 滾動來實現(xiàn)
- webview觸發(fā)手勢時會回調(diào) onTouchStart
- 當有電話等更高級別的時間時會打斷手勢，會回調(diào) onTouchCancel
- 手勢正常結(jié)束后會調(diào)用 onTouchEnd
<ScrollView style={{ flex: 1 }} scrollEnabled={this.state.scrollEnabled}>
<WebView
style={{ height: 300 }}
originWhitelist={["*"]}
source={{ html: html }}
onTouchStart={() => {
this.setState({ scrollEnabled: false })
}}
onTouchCancel={() => {
this.setState({ scrollEnabled: true })
}}
onTouchEnd={() => {
this.setState({ scrollEnabled: true })
}}
/>
</ScrollView>
隨意定義個html給上面測試用
<!DOCTYPE html>
<html>
<head>
<title>HTML字符串</title>
<metahttp-equivmetahttp-equiv="content-type" content="text/html;charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, charset=utf-8">
<style type="text/css">
body {
font: 14px;
background: #FFF;
line-height: 30px;
}
</style>
</head>
<body>
<p>
蒙恬技能命中敵方或防御姿態(tài)期間所受到的傷害（計算忽略自身免傷）會成為兵勢，兵勢最大值為1000~4500（隨人物等級成長）。蒙恬的蓄力猛擊會附加35%兵勢的物理傷害，兵勢盛極后的蓄力猛擊還可額外造成20%傷害和已損失生命值8%的回復(fù)。
防御姿態(tài)：蒙恬普攻會消耗所有兵勢強化為蓄力猛擊，造成40(+100%物理加成)點物理傷害，蓄力期間可減少20%來自正面的傷害、免疫控制效果并獲得額外100%的兵勢。如果蒙恬在此期間受到傷害，則會對前方目標造成90%減速效果，持續(xù)0.5秒。
<br>
<img
src="http://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=http%3A%2F%2F08imgmini.eastday.com%2Fmobile%2F20200605%2F20200605234833_3a216db3eae5e43c06c7e992f3773deb_1.jpeg&thumburl=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D408302830%2C1726243272%26fm%3D11%26gp%3D0.jpg"
style="max-width:100%;">
</p>
</body>
</html>
