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

本文主要介绍react-native 通过webview跳转支付宝客户端进行支付，并且支付完成后能自动返回当前的app，一般app进行支付直接是链接支付宝的sdk，如果是直接通过sdk进行支付请忽略此文章。
【react-native|react-native webview跳转支付宝客户端并返回app】本文主要借鉴支付宝官网的网页支付：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) { letstrUrl = 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) { letstrUrl = 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 自己看链接吧，比较懒。。。