import { View, StyleSheet, Alert } from "react-native"; import { useRoute, RouteProp, useNavigation } from "@react-navigation/native"; import { useEffect, useState } from "react"; import { payApi, PaymentInfoResponse } from "../../services/api/payApi"; import { WebView } from "react-native-webview"; import * as Linking from "expo-linking"; import { navigate, navigationRef } from "../../navigation/RootNavigation"; type PayScreenRouteProp = RouteProp< { Pay: { payUrl: string }; }, "Pay" >; export const Pay = () => { const [loading, setLoading] = useState(true); const route = useRoute(); const navigation = useNavigation(); const { payUrl } = route.params; const [payInfo, setPayInfo] = useState(); useEffect(() => { console.log(route.params); console.log(payUrl); // 设置处理深度链接的监听器 const handleDeepLink = ({ url }: { url: string }) => { console.log("Deep link received:", url); if ( url.includes("myapp://payment-success") || url.includes("exp://192.168.0.101:8084/--/payment-success") ) { const parsed = Linking.parse(url); const params = parsed.queryParams || {}; navigate("PaymentSuccessScreen", params); } }; // 添加深度链接事件监听器 const subscription = Linking.addEventListener("url", handleDeepLink); return () => { // 清理订阅 subscription.remove(); }; }, []); const handleNavigationStateChange = (navState: any) => { console.log(navState); // 检查URL是否包含支付成功的回调参数 const { url } = navState; if (url && url.includes("payment_success=true")) { // 如果网页URL中包含成功参数,可以在这里处理 Alert.alert("检测到支付成功!"); // navigation.navigate('PaymentConfirmation'); } }; // 导航辅助函数,尝试使用多种方式导航 const safeNavigate = (routeName: string, params: any) => { console.log(`尝试导航到 ${routeName},参数:`, params); console.log(`navigationRef准备状态: ${navigationRef.isReady()}`); try { // 尝试使用组件内的navigation console.log("使用组件内navigation导航"); // @ts-ignore 忽略可能的类型错误 navigation.navigate(routeName, params); } catch (e) { console.log("组件内导航失败:", e); try { // 尝试使用全局navigation console.log("使用全局navigate导航"); navigate(routeName, params); } catch (e) { console.log("全局导航也失败:", e); // 最后尝试使用setTimeout延迟导航 console.log("尝试延迟导航"); setTimeout(() => { try { // @ts-ignore 忽略可能的类型错误 navigation.navigate(routeName, params); } catch (e) { console.log("所有导航方式都失败"); Alert.alert("导航失败", "无法跳转到目标页面"); } }, 500); } } }; return ( {payUrl ? ( setLoading(true)} onLoadEnd={() => setLoading(false)} javaScriptEnabled={true} domStorageEnabled={true} startInLoadingState={true} scalesPageToFit={true} originWhitelist={["*"]} userAgent="Mozilla/5.0 (Linux; Android 10; Pixel 3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Mobile Safari/537.36" onShouldStartLoadWithRequest={(request) => { console.log("Load request:", request); // 检查URL是否包含支付成功的参数 const { url } = request; if (url) { // 解析参数 const parsed = Linking.parse(url); const params = parsed.queryParams || {}; console.log("解析的URL参数:", params); // 检查是否存在paymentId参数并且不为null if (params.paymentId && params.paymentId !== "null") { console.log("检测到有效的paymentId:", params.paymentId); Alert.alert("支付成功"); if (params.PayerID && params.PayerID !== "null") { payApi .paySuccessCallback( params.paymentId as string, params.PayerID as string ) .then((res) => { if (res.status === 1) { // 尝试跳转到支付成功页面 safeNavigate("PaymentSuccessScreen", params); } else { safeNavigate("PayError", params); } }); } return false; // 不在WebView中加载 } else { // console.log("未检测到有效的paymentId,导航到支付失败页面"); // Alert.alert("支付失败"); // // 尝试跳转到支付失败页面 // safeNavigate('PayError', params); // return false; // 不在WebView中加载 } } // 允许所有其他请求 return true; }} /> ) : ( {/* Add fallback content here */} )} ); }; const styles = StyleSheet.create({ webview: { flex: 1, }, });