Question

如何在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>

Answer 1

认为这可能对其他人有所帮助，我通过在标题中添加以下内容解决了这个问题：

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">

Answer 2

对于那些想要明确想法的人：

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
 />

Answer 3

在here

中尝试scalesPageToFit={false}了解更多信息

Answer 4

如果您使用的是:root { --shade-l6: 255, 176, 31; } @media all and (prefers-color-scheme: dark) { .dynamic { --shade-l6: 255, 91, 31; } } .dark { --shade-l6: 255, 91, 31; } .form-search .form-control { border-color: Rgba(var(--shade-l6), 0.5); background-color: Rgba(var(--shade-l6), 0.5); }-WKWebView道具不起作用。您可以选中此issue here，将其引至this one

现在要完成您想要的操作，您应该使用scalesPageToFit道具。但是还有here

所述的其他内容

injectedJavascript

这花了我一些时间来发现。所以最后您会得到这样的东西：

Be sure to set an onMessage handler, even if it's a no-op, or the code will not be run.

Answer 5

对于将来的任何人，我通过添加以下css解决了这个问题：

*:not(input) {
  user-select: none;
}

以上基本上禁用所有元素的文本选择，在我的测试期间不允许缩放网页。仅供参考：我没有深入了解细节，只是陈述其影响。

Answer 6

我可以通过将null java.lang.NullPointerException at com.android.tools.idea.run.tasks.InstantRunNotificationTask.<init>(InstantRunNotificationTask.java:63) at com.android.tools.idea.fd.InstantRunBuildAnalyzer.getNotificationTask(InstantRunBuildAnalyzer.java:178) at com.android.tools.idea.run.AndroidLaunchTasksProvider.getTasks(AndroidLaunchTasksProvider.java:120) at com.android.tools.idea.run.LaunchTaskRunner.run(LaunchTaskRunner.java:102) at com.intellij.openapi.progress.impl.CoreProgressManager$TaskRunnable.run(CoreProgressManager.java:726) at com.intellij.openapi.progress.impl.CoreProgressManager.lambda$runProcess$1(CoreProgressManager.java:176) at com.intellij.openapi.progress.impl.CoreProgressManager.registerIndicatorAndRun(CoreProgressManager.java:556) at com.intellij.openapi.progress.impl.CoreProgressManager.executeProcessUnderProgress(CoreProgressManager.java:501) at com.intellij.openapi.progress.impl.ProgressManagerImpl.executeProcessUnderProgress(ProgressManagerImpl.java:66) at com.intellij.openapi.progress.impl.CoreProgressManager.runProcess(CoreProgressManager.java:163) at com.intellij.openapi.progress.impl.ProgressManagerImpl$1.run(ProgressManagerImpl.java:137) at com.intellij.openapi.application.impl.ApplicationImpl$2.run(ApplicationImpl.java:334) at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:511) at java.util.concurrent.FutureTask.run(FutureTask.java:266) at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142) at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617) at java.lang.Thread.run(Thread.java:745)包裹在WebView并设置一些道具来禁用缩放，文本选择和其他指针事件：

View

Answer 7

有点怪异的东西，但是可以用

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-scaleable = 0

Answer 8

将此属性放入Webview pointerEvents="none"，或使用此属性将Webview包装为其他视图。

禁用web-view react-native上的缩放？

8 个答案: