从 WebView 中反应本机深层链接答案

【问题标题】：React Native Deep Link from within WebView从 WebView 中反应本机深层链接
【发布时间】：2019-06-12 09:21:44
【问题描述】：

我正在使用带有 React Navigation 和 react-native-deep-linking 和 react-native-webview 包的 React Native。

我的应用程序正在使用深层链接来访问应用程序的不同屏幕，并且在 iPhone 上打开深层链接工作正常，但在 WebView 中打开深层链接时，如果我按下链接则什么也不会发生。该应用程序甚至不会对单击链接做出反应，也没有 console.warn 消息等等。

如果我在 iPhone 上使用 Safari，这些功能就可以正常工作，但不能在 WebView 中使用。

这是 WebView 代码：

class BankID extends React.Component {
  render() {
      return (
        <WebView
          style={{ flex: 1 }}
          source={{ uri: 'https://URL/file.html' }}
        />
      );
  }
}
export default BankID;

文件.html：

<html>
<body>
<a href="test://1234">App-Link</a>
</body>
</html>

从 App.js 中，我得到了 github repo 中指示的深度链接组件：

componentDidMount() {
  DeepLinking.addScheme('test://');

  Linking.addEventListener('url', this.handleUrl);

    Linking.getInitialURL().then((url) => {
      if (url) {
        Linking.openURL(url);
      }
    }).catch(err => console.error('An error occurred', err));

    DeepLinking.addRoute('/:id', ({ id }) => {
      this.setState({ roomKey: id.toString() });
      if (this.vidyoConnector) {
        this.callButtonPressHandler();
      }
    });
 }
  handleUrl = ({ url }) => {
    Linking.canOpenURL(url).then((supported) => {
      if (supported) {
        DeepLinking.evaluateUrl(url);
      }
    }).catch((error) => {
      console.warn('handleUrl failed with the following reason: ', error);
    });
  }

任何帮助将不胜感激。谢谢。

【问题讨论】：

您找到解决方法了吗？
是的，下面是我的答案。

标签： ios react-native webview deep-linking

【解决方案1】：

我遇到了onNavigationStateChange 的问题，在打开外部网址时会留下一个不可点击/可点击的页面，所以我使用了它，现在它运行良好。

        <WebView
          ref={webView}
          source={{ uri: uri }}
          startInLoadingState // ignore warning
          onMessage={handleOnMessage}
          javaScriptEnabled
          onShouldStartLoadWithRequest={handleOnShouldStartLoadWithRequest}
        />

  const handleOnShouldStartLoadWithRequest = (event) => {
    const hostname = extractHostname(event.url)

    if (event.url && ![BASE_DOMAIN, APPLEID_DOMAIN].includes(hostname)) {
      Linking.openURL(event.url)
      return false
    } else {
      return true
    }
  }

【讨论】：

【解决方案2】：

这对我有用：

我在 webview 中添加了 onShouldStartLoadWithRequest 和一个函数。

  <WebView
    other
    stuff
    onShouldStartLoadWithRequest={this.openExternalLink}
  />

然后是函数：

  openExternalLink= (req) => {
    const isHTTPS = req.url.search('https://') !== -1;

        if (isHTTPS) {
          return true;
        } else {
          if (req.url.startsWith("test://")) {
            this.props.navigation.navigate('Home');
          } 
          return false;
        }
      }

不必更改 App.js 中的任何内容

【讨论】：

当用户点击 WebView 中的 [deep]-link 调用时这不起作用