water-sys/app/screens/login/Google.tsx

import React, { useState, useEffect } from "react";
import { View, StyleSheet, ActivityIndicator } from "react-native";
import { WebView } from "react-native-webview";
import { useNavigation } from "@react-navigation/native";
import { loginApi } from "../../services/api/login";
import { useAuth } from "../../contexts/AuthContext";

export const GoogleScreen = () => {
  const navigation = useNavigation();
  const { login } = useAuth();
  const [loading, setLoading] = useState(true);
  const [loginUrl, setLoginUrl] = useState<string | null>(null);

  useEffect(() => {
    const fetchLoginUrl = async () => {
      try {
        const response = await loginApi.google();
        if (response.data.url) {
          setLoginUrl(response.data.url);
        }
      } catch (error) {
        console.error('Failed to fetch login URL:', error);
      }
    };

    fetchLoginUrl();
  }, []);

  const handleNavigationStateChange = async (navState: any) => {    
    console.log(navState.url);
    
    // 检查URL是否包含重定向URI
    if (navState.url.includes('localhost:8000')) {      
      try {
        await login();
        navigation.navigate('MainTabs' as never);
      } catch (error) {
        console.error('Login failed:', error);
      }
    }
  };

  if (!loginUrl) {
    return (
      <View style={styles.loadingContainer}>
        <ActivityIndicator size="large" color="#4285F4" />
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <WebView
        source={{ uri: loginUrl }}
        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(request);
          
          // 允许所有请求
          return true;
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  webview: {
    flex: 1,
  },
});