Question

我正在我的应用程序中显示一个URL，我想检查页面是否包含给定单词，让我们说URL为

https://github.com/facebook/react-native

如果我的应用程序中有任何链接包含facebook，那么我该如何对我说：隐藏或删除整个html元素。

这就是我显示链接的方式：

 <WebView
          source={{uri: 'https://github.com/facebook/react-native'}}
          style={{marginTop: 20}}
        />

Answer 1

实际上，您不需要访问WebView中的元素。您可以直接隐藏/显示WebView组件。将链接定义为字符串：

const myLink = 'https://github.com/facebook/react-native';

然后，您可以检查其是否包含单词facebook。如果包含它，则可以这样显示或隐藏它；

{ myLink.indexOf('facebook') > -1 ? 
        <WebView
          source={{uri: 'https://github.com/facebook/react-native'}}
          style={{marginTop: 20}}
        /> : null 
}

您还可以将JavaScript规则注入WebView。为此，您在组件上需要以下道具：

    <WebView
      javaScriptEnabled
      injectedJavaScript={'function injectRules() {' + myRule + '};injectRules();'}
      source={{uri: 'https://github.com/facebook/react-native'}}
      style={{marginTop: 20}}
    />

这基本上定义了一个JavaScript函数并调用它。然后，您需要在react-native端将功能实现为字符串。以下只是一个更改颜色的示例，您可以实现自己的JS函数来隐藏元素：

const myRule = 'document.querySelector("div>p").style.color ="black";';

您可以将其进一步包装为if条件：

const myRule = myLink.indexOf('facebook') > -1 ? 'document.querySelector("div>p").style.color ="black";' : 'return;';

我可以在React Native Web视图中访问元素吗？

1 个答案: