React Native - 在浏览器中打开链接 [英] React Native - open links in browser

问题描述

我正在使用 react native 的 webview 来显示一些 html，我希望每当用户单击该 html 中的链接时，它将使用该链接打开用户的浏览器.

Hi i am using react native's webview to display some html, i want that whenever a user clicks a link inside that html, it will open the user's browser with that link.

这可能吗?

我最终使用了这个包:npmjs.com/package/react-native-communications，它打开了浏览器.当 URL 更改时，我调用浏览器在 onNavigationStateChange 上打开.

I ended up using this package : npmjs.com/package/react-native-communications which opens the browser. I call the browser to open on onNavigationStateChange when the URL changes.

现在的情况是，虽然我已经移动到浏览器，但 WebView 仍然继续处理请求，我该如何停止请求?

The thing now is that the WebView still continues to process the request although I have moved to the browser, how can i stop the request?

推荐答案

这是一个完整的工作解决方案:

Here is a complete working solution:

import React, { Component } from 'react';
import { WebView, Linking } from 'react-native';

export default class WebViewThatOpensLinksInNavigator extends Component {
  render() {
    const uri = 'http://stackoverflow.com/questions/35531679/react-native-open-links-in-browser';
    return (
      <WebView
        ref={(ref) => { this.webview = ref; }}
        source={{ uri }}
        onNavigationStateChange={(event) => {
          if (event.url !== uri) {
            this.webview.stopLoading();
            Linking.openURL(event.url);
          }
        }}
      />
    );
  }
}

它使用一个简单的 WebView，拦截任何 url 更改，如果该 url 与原始 url 不同，则停止加载，防止页面更改，并在 OS Navigator 中打开它.

It uses a simple WebView, intercepts any url change, and if that url differs from the original one, stops the loading, preventing page change, and opens it in the OS Navigator instead.

这篇关于React Native - 在浏览器中打开链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！