water-sys/app/screens/pay/Pay.tsx

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<PayScreenRouteProp>();
  const navigation = useNavigation();
  const { payUrl } = route.params;
  const [payInfo, setPayInfo] = useState<PaymentInfoResponse>();

  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 (
    <View style={{ flex: 1 }}>
      {payUrl ? (
        <WebView
          source={{ uri: payUrl }}
          style={styles.webview}
          onNavigationStateChange={handleNavigationStateChange}
          onLoadStart={() => 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;
          }}
        />
      ) : (
        <View>{/* Add fallback content here */}</View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  webview: {
    flex: 1,
  },
});