无法打开URL:电话:或使用webview在react native中提示电子邮件编写器

pgvzfuti  于 2022-11-30  发布在  React
关注(0)|答案(1)|浏览(244)

我正在使用的react-native的当前版本。

"react": "17.0.1",
"react-native": "0.64.0",

这是来自api的数据,显示在webview中。

<br>
<div class="address"><span></span></div>
<div class="address"><span></span></div>
<div class="phone"><a href="tel:%20+91%2079%204898%208801"><i class="fa fa-phone" title="Phone"></i> <span style="text-decoration: underline;"> +91 79 4898 8801</span></a></div>
<div class="mail"><a href="mailto:%20info@shop.com">info@shop.com</a></div>
<br><br>

我无法打开电话拨号器与号码在webview和电子邮件 composer 。我得到这个警告/错误

Can't open url: tel:%20+91%2079%204898%208801
bwntbbo3

bwntbbo31#

我已经用过这个解决方案了。

onShouldStartLoadWithRequest(request) {
    // short circuit these
    if (
      !request.url ||
      request.url.startsWith('http') ||
      request.url.startsWith('/') ||
      request.url.startsWith('#') ||
      request.url.startsWith('javascript') ||
      request.url.startsWith('about:blank')
    ) {
      return true;
    }

    // blocked blobs
    if (request.url.startsWith('blob')) {
      showToastMsg(translate('linkCantOpen'), true);
      return false;
    }

    // list of schemas we will allow the webview
    // to open natively
    if (
      request.url.startsWith('tel:') ||
      request.url.startsWith('mailto:') ||
      request.url.startsWith('maps:') ||
      request.url.startsWith('geo:') ||
      request.url.startsWith('sms:')
    ) {
      Linking.openURL(request.url).catch(er => {
        showToastMsg(translate('linkCantOpen'), true);
      });
      return false;
    }

    // let everything else to the webview
    return true;
  }

这是我的webview,我正在使用这个webview react-native-autoheight-webview

<MyWebView
            ref={ref => (this.webviewRef = ref)}
            style={styles.webview}
            originWhitelist={['http://*', 'https://*', 'tel:*', 'mailto:*']}
            customStyle={`
            * {
              font-family: '${font}';
              font-size: 14px;
              margin-start:16px:
              margin-end:16px;
            }
          `}
            files={[
              {
                href: 'cssfileaddress',
                type: 'text/css',
                rel: 'stylesheet',
              },
            ]}
            source={{
              html: body,
            }}
            scalesPageToFit={false}
            scrollEnabled={true}
            viewportContent={'width=device-width, user-scalable=no'}
            onShouldStartLoadWithRequest={this.onShouldStartLoadWithRequest.bind(
              this,
            )}
          />

抄送:react-native-autoheight-webview

相关问题