本文主要介紹react-native 通過webview跳轉(zhuǎn)支付寶客戶端進(jìn)行支付，并且支付完成后能自動返回當(dāng)前的app，一般app進(jìn)行支付直接是鏈接支付寶的sdk酿傍，如果是直接通過sdk進(jìn)行支付請忽略此文章特纤。
本文主要借鑒支付寶官網(wǎng)的網(wǎng)頁支付：https://docs.open.alipay.com/203/107091/
iOS原生跳轉(zhuǎn)網(wǎng)頁支付寶怎么返回當(dāng)前app的文章：http://www.reibang.com/p/0d8dd04fe94e
一開始我先用webview直接加載一個支付寶的網(wǎng)頁鏈接岁疼，真機(jī)運(yùn)行之后，只能網(wǎng)頁支付晨逝，不能跳轉(zhuǎn)支付寶蛾默，后來又轉(zhuǎn)戰(zhàn)到原生，然后一系列的rn跟原生交互捉貌，原生跟js交互支鸡，根據(jù)上面兩篇文章的介紹冬念，能成功跳轉(zhuǎn)支付寶客戶端并返回
#pragma mark ============== webview相關(guān) 回調(diào)及加載 ==============
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
// NOTE: ------ 對alipays:相關(guān)的scheme處理 -------
// NOTE: 若遇到支付寶相關(guān)scheme，則跳轉(zhuǎn)到本地支付寶App
NSString* reqUrl = request.URL.absoluteString;
if ([reqUrl hasPrefix:@"alipays://"] || [reqUrl hasPrefix:@"alipay://"]) {
// NOTE: 跳轉(zhuǎn)支付寶App
NSString *strUrl = [reqUrl stringByReplacingOccurrencesOfString:@"alipays" withString:@"xxx"];//這里面的xxx是你在iOS原生配置的urlScheme牧挣，用來返回你的app的一個標(biāo)志
NSURL *urls =[NSURL URLWithString:strUrl];
[[UIApplication sharedApplication]openURL:urls];
}
return YES;
}
因為我們支付寶支付完成之后跳轉(zhuǎn)到成功頁面急前，會有一個按鈕，點擊這個按鈕跳轉(zhuǎn)到rn指定的頁面浸踩，用原生就有一個問題叔汁，首先原生支付完成之后，他要先返回到rn頁面检碗，然后才能在跳轉(zhuǎn)到指定頁面据块，這樣就會有一個一閃一跳的問題,如果頁面沒有這種操作，直接跳轉(zhuǎn)原生也是很不錯的折剃。
因為上述問題另假，也因為對rn的webview跳轉(zhuǎn)到支付寶客戶端竟然做不到的不甘心，然后又嘗試了一番怕犁，結(jié)果是可以的边篮，看webview的文檔發(fā)現(xiàn)，其實rn的webview也是有 “onShouldStartLoadWithRequest” 這個方法的奏甫，然后我就按照原生的方法戈轿，復(fù)制到了這個方法里面，成功跳轉(zhuǎn)支付寶阵子，但是支付寶返回的時候思杯，返回不到自己的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的一個標(biāo)志
Linking.openURL(strUrl);
}
return true;
}
我試過好幾次挠进，每次都返回不了app色乾，但是我把我上面修改之后的url拿出來放在瀏覽器試驗了一番，是可以的跳轉(zhuǎn)到支付寶并且能返回到app的领突，既然鏈接沒有問題暖璧，那就是代碼問題了，我試著在onShouldStartLoadWithRequest這個方法里面跟原生進(jìn)行交互君旦，把跳轉(zhuǎn)放在原生里面依舊不行澎办，放棄了。于宙。
后來又看了一下支付寶官網(wǎng)的網(wǎng)頁支付的demo浮驳，發(fā)現(xiàn)了當(dāng)他跳轉(zhuǎn)到支付寶的時候，會有一個判斷捞魁，可以自行下載他官方的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是能直接跳轉(zhuǎn)到支付寶客戶端的煤痕，如果iOS用了onShouldStartLoadWithRequest梧宫，請自行判斷是iOS還是安卓，因為安卓加上上述代碼摆碉，就不能跳轉(zhuǎn)到客戶端了塘匣。。巷帝。
文章到這里就結(jié)束了忌卤，寫的比較亂，但大體思路就這樣楞泼，感謝上面提供 支付寶跳轉(zhuǎn)成功無法返回app文章的大神驰徊，他寫的文章成功的解決了我的問題，如果大家有新的解決辦法堕阔，或者是有更好的思路棍厂，請指教！超陆！
