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

时间:2018-07-16 10:04:37

标签: reactjs react-native

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

  

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

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

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

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

1 个答案:

答案 0 :(得分:0)

实际上,您不需要访问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;';