如何禁用react-native
web-view
上的缩放,有没有像hasZoom={false}
这样的属性(只是一个例子)可以包含在下面的web-view
标签中,可以禁用缩放。它必须同时处理android和ios。
<WebView
ref={WEBVIEW_REF}
source={{uri:Environment.LOGIN_URL}}
ignoreSslError={true}
onNavigationStateChange={this._onNavigationStateChange.bind(this)}
onLoad={this.onLoad.bind(this)}
onError={this.onError.bind(this)}
></WebView>
认为这可能有助于其他人,我通过在标题中添加以下内容来解决这个问题:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
对于那些想要明确想法的人:
const INJECTEDJAVASCRIPT = `const meta = document.createElement('meta'); meta.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=0'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta); `
<WebView
source={{ html: params.content.rendered }}
scalesPageToFit={isAndroid() ? false : true}
injectedJavaScript={INJECTEDJAVASCRIPT}
scrollEnabled
/>
在scalesPageToFit={false}
中尝试更多信息here
对于将来的任何人,我通过添加以下css解决了这个问题:
*:not(input) {
user-select: none;
}
以上基本上禁用了所有元素的文本选择,这在我的测试期间不允许缩放网页。仅供参考:我没有深入细节,只是说明它的影响。
通过在WebView
中包装View
并设置一些道具,我能够禁用缩放,文本选择和其他指针事件:
<View pointerEvents="none">
<WebView
source={{ uri: webviewUrl }}
scrollEnabled={false}
/>
</View>
小hacky的东西,但它的工作原理
const INJECTEDJAVASCRIPT = 'const meta = document.createElement(\'meta\'); meta.setAttribute(\'content\', \'width=device-width, initial-scale=1, maximum-scale=0.99, user-scalable=0\'); meta.setAttribute(\'name\', \'viewport\'); document.getElementsByTagName(\'head\')[0].appendChild(meta); '
<WebView
injectedJavaScript={INJECTEDJAVASCRIPT}
scrollEnabled
ref={(webView) => {
this.webView = webView
}}
originWhitelist={['*']}
source={{ uri: url }}
onNavigationStateChange={(navState) => {
this.setState({
backButtonEnabled: navState.canGoBack,
})
}}
/>
注意initial-scale = 1,maximum-scale = 0.99,user-scalable = 0
将此属性放入Webview pointerEvents="none"
,或使用此属性将Webview包装到其他视图中。