react-native webview跳转支付宝客户端并返回app

本文主要介绍react-native 通过webview跳转支付宝客户端进行支付，并且支付完成后能自动返回当前的app，一般app进行支付直接是链接支付宝的sdk，如果是直接通过sdk进行支付请忽略此文章。

本文主要借鉴支付宝官网的网页支付：https://docs.open.alipay.com/203/107091/
iOS原生跳转网页支付宝怎么返回当前app的文章：https://www.jianshu.com/p/0d8dd04fe94e

一开始我先用webview直接加载一个支付宝的网页链接，真机运行之后，只能网页支付，不能跳转支付宝，后来又转战到原生，然后一系列的rn跟原生交互，原生跟js交互，根据上面两篇文章的介绍，能成功跳转支付宝客户端并返回

#pragma mark   ============== webview相关 回调及加载 ==============
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
  // NOTE: ------  对alipays:相关的scheme处理 -------
  // NOTE: 若遇到支付宝相关scheme，则跳转到本地支付宝App
  NSString* reqUrl = request.URL.absoluteString;
  if ([reqUrl hasPrefix:@"alipays://"] || [reqUrl hasPrefix:@"alipay://"]) {
    // NOTE: 跳转支付宝App
    NSString *strUrl = [reqUrl stringByReplacingOccurrencesOfString:@"alipays" withString:@"xxx"];//这里面的xxx是你在iOS原生配置的urlScheme，用来返回你的app的一个标志
    NSURL *urls =[NSURL URLWithString:strUrl];
    [[UIApplication sharedApplication]openURL:urls];
  }
  return YES;
}

因为我们支付宝支付完成之后跳转到成功页面，会有一个按钮，点击这个按钮跳转到rn指定的页面，用原生就有一个问题，首先原生支付完成之后，他要先返回到rn页面，然后才能在跳转到指定页面，这样就会有一个一闪一跳的问题,如果页面没有这种操作，直接跳转原生也是很不错的。

因为上述问题，也因为对rn的webview跳转到支付宝客户端竟然做不到的不甘心，然后又尝试了一番，结果是可以的，看webview的文档发现，其实rn的webview也是有 “onShouldStartLoadWithRequest” 这个方法的，然后我就按照原生的方法，复制到了这个方法里面，成功跳转支付宝，但是支付宝返回的时候，返回不到自己的app,代码如下：

 onShouldStartLoadWithRequest(event){
        let reqUrl =event.url;
        if(reqUrl.indexOf("alipay://alipayclient")>-1 || reqUrl.indexOf("alipays://alipayclient")>-1) {
            let  strUrl = reqUrl.replace("alipays", "xxx");//这里面的xxx是你在iOS原生配置的urlScheme，用来返回你的app的一个标志
            Linking.openURL(strUrl);
        }
        return true;
    }

我试过好几次，每次都返回不了app，但是我把我上面修改之后的url拿出来放在浏览器试验了一番，是可以的跳转到支付宝并且能返回到app的，既然链接没有问题，那就是代码问题了，我试着在onShouldStartLoadWithRequest这个方法里面跟原生进行交互，把跳转放在原生里面依旧不行，放弃了。。
后来又看了一下支付宝官网的网页支付的demo，发现了当他跳转到支付宝的时候，会有一个判断，可以自行下载他官方的demo ,看一下代码，然后我就修改了一下代码：

 onShouldStartLoadWithRequest(event){
        let reqUrl =event.url;
        if(reqUrl.indexOf("alipay://alipayclient")>-1 || reqUrl.indexOf("alipays://alipayclient")>-1) {
            let  strUrl = reqUrl.replace("alipays", "XXX");
            Linking.openURL(strUrl);
            return false; //这一行是新加入了，必须加，如果不加，就返回不了app
        }
        return true;
    }

成功返回自己的app，中途报了一个错

Setting onMessage on a WebView overrides existing values of window.postMessage, but a previous value was defined.
解决办法：
https://blog.csdn.net/qq_37336604/article/details/80857895 自己看链接吧，比较懒。。。

小提示:安卓的webview是能直接跳转到支付宝客户端的，如果iOS用了onShouldStartLoadWithRequest，请自行判断是iOS还是安卓，因为安卓加上上述代码，就不能跳转到客户端了。。。

文章到这里就结束了，写的比较乱，但大体思路就这样，感谢上面提供支付宝跳转成功无法返回app文章的大神，他写的文章成功的解决了我的问题，如果大家有新的解决办法，或者是有更好的思路，请指教！！