react-native-webView H5支付

上代码 解析在下边 适用于所有安卓手机端webview支付
ios 添加微信Scheme即可使用

//拦截H5页面跳转事件 (request ) => boolean true继续跳转 false停止跳转

<WebView>
source={{ uri: 'uri',}}
  onShouldStartLoadWithRequest={request => {
              //url
              const url = request.url;
              console.log('nowUrl', request);
              //如果跳转的为 微信支付或者 支付宝支付
              if (
                url.startsWith('weixin://wap/pay?') ||
                url.startsWith('alipay')
              ) {
                if (url.startsWith('alipay')) {
                  //打开支付宝
                  Linking.openURL(url);

                } else {
                  console.log('wxpay', url);
                  //打开微信
                  Linking.openURL(url);
                }
                return false;
              } else {
                console.log('未拦截');
                return true;
              }
            }}
</WebView>

因微信支付特殊性 需修改react-nativ-webview 文件node_modules\react-native-webview\android\src\main\java\com\reactnativecommunity\webview\RNCWebViewManager.java

shouldOverrideUrlLoading方法

修改为以下

public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {

      final String url = request.getUrl().toString();

      if(url.startsWith("https://wx.tenpay.com")){
        Map<String, String> headers = new HashMap<String, String>();
        headers.put("Referer","http:xxxxxxx.xxx");//填入 H5 端的支付域名
        view.loadUrl(url, headers);
        return true;
      }

      return this.shouldOverrideUrlLoading(view, url);

    }

微信支付解析（仅自己理解）

H5发送跳转事件 跳转到 【https://wx.tenpay.com/xxxx】 的页面（对应底层的拦截） 由此页面生成真正的H5支付信息和跳转链接
这个跳转链接以【weixin://wap/pay?】为开头 在webview中拦截此页面
调用打开浏览器的方法 去打开此链接会自动跳转