Question

我正在尝试弄清楚如何在我的ios应用程序的React-Native WebView中禁用文本选择。在网站上使用设置为user-select的css样式none在使用设备或模拟器时似乎不起作用，但它确实在浏览器中有效。有没有办法使用React-Native WebView禁用它，或者我是否需要使用一些本机代码来实现此目的？

使用React-Native 0.30，iOS 9-10

Answer 1

通过将WebView包裹在View中并设置一些道具，我能够在React Native端禁用缩放，文本选择和其他指针事件：

<View pointerEvents="none">
  <WebView
    source={{ uri: webviewUrl }}
    scrollEnabled={false}
  />
</View>

Answer 2

假设您要以react native访问Webview上的特定URL，然后在URL中使用以下技巧：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<div style="font-size:80%;padding-left:10px;padding-right:10px;">


<!DOCTYPE html>
<html>
<head>
  <script>
    function absorbEvent_(event) {
      var e = event || window.event;
      e.preventDefault && e.preventDefault();
      e.stopPropagation && e.stopPropagation();
      e.cancelBubble = true;
      e.returnValue = false;
      return false;
    }

    function preventLongPressMenu(node) {
      node.ontouchstart = absorbEvent_;
      node.ontouchmove = absorbEvent_;
      node.ontouchend = absorbEvent_;
      node.ontouchcancel = absorbEvent_;
    }

    function init() {
      preventLongPressMenu(document.getElementByTagName('body img'));
    }
  </script>
  <style>
    *:not(input):not(textarea) {
    -webkit-user-select: none; /* disable selection/Copy of UIWebView */
        -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */

    }
  </style>
</head>

<body onload="init()"  >


TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>TEST<br>

</body>

以上将禁用文本选择，但是它允许其他功能，例如“单击”。（它可在iOS和android设备上使用）

享受...

Answer 3

documentation没有提到这一点，所以我会选择原生实现，这比看起来容易。您只需在包含所需选项的原生模块中重新实施this files（可能还有其他一些），请参阅this answer和this one。

也许这个软件包也可以帮助您实现模块：https://github.com/lucasferreira/react-native-webview-android

Answer 4

我找到了解决方案。请尝试。

* {
  -webkit-user-select: none;
  -webkit-touch-callout: none; 
}

如何在WebView中禁用用户文本选择[React-Native]

4 个答案: