如何在 WebView 中检测被点击的单词？答案

【问题标题】：How to detect tapped word in WebView?如何在 WebView 中检测被点击的单词？
【发布时间】：2018-10-10 11:14:34
【问题描述】：

我有一个简单的 WebView，想知道其中的哪个词被点击了。例如，如果用户在图片上点击文章中的任何单词，例如“气球”，我想捕捉它。

这是代码和渲染。

export default class App extends React.Component {
  render() {
    return (
      <View style={{top:100, height: 500, backgroundColor:'red' }}>
        <WebView
          source={{uri: 'https://www.reuters.com/article/us-art-banksy/we-just-got-banksy-ed-balloon-girl-painting-self-destructs-at-sale-idUSKCN1MG0B4?feedType=RSS&feedName=artsNews'}}
          style={{height:"200", marginTop: 20}}
        />
      </View>

    );
  }
}

更新： 这就是我如何让 WebView 根据@pritesh 回答返回 JS 事件。

<WebView
          source={{uri: 'https://www.reuters.com/article/us-art-banksy/we-just-got-banksy-ed-balloon-girl-painting-self-destructs-at-sale-idUSKCN1MG0B4?feedType=RSS&feedName=artsNews'}}
          style={{height:"200", marginTop: 20}}
          javaScriptEnabled={true}
          injectedJavaScript={`document.body.addEventListener('click', 
        function(e){
          window.postMessage("Message from WebView","*");
          console.log(e);
        })`}
          onMessage={e => console.log("message", e)}
        />

【问题讨论】：

标签： react-native

【解决方案1】：

在我看来，您可以尝试的一种方法是使用 WebView 的 injectJavascript 或 injectedJavascript 道具。因此您可以在 body 上注册某种侦听器并使用它来检测被按下的内容，喜欢：

<WebView
    ref={c => this._webview = c}
    javaScriptEnabled={true}
    injectedJavaScript={`document.body.addEventListener('click', function(e){
        console.log(e)
    })`}
/>

但是你检查并研究如何将回调从 Webview 传递给 React。

【讨论】：

谢谢，这确实有助于接近预期的结果。