获取WebView内容高度
通过注入js获取网页内容高度，然后调用window.ReactNativeWebView.postMessage方法把高度回调给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 触发手势的时候禁止外层 ScrollView 滚动来实现
- webview触发手势时会回调 onTouchStart
- 当有电话等更高级别的时间时会打断手势，会回调 onTouchCancel
- 手势正常结束后会调用 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>
蒙恬技能命中敌方或防御姿态期间所受到的伤害（计算忽略自身免伤）会成为兵势，兵势最大值为1000~4500（随人物等级成长）。蒙恬的蓄力猛击会附加35%兵势的物理伤害，兵势盛极后的蓄力猛击还可额外造成20%伤害和已损失生命值8%的回复。
防御姿态：蒙恬普攻会消耗所有兵势强化为蓄力猛击，造成40(+100%物理加成)点物理伤害，蓄力期间可减少20%来自正面的伤害、免疫控制效果并获得额外100%的兵势。如果蒙恬在此期间受到伤害，则会对前方目标造成90%减速效果，持续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>
网友评论