React Native Expo 应用中的 firebase 和 google auth 问题

Question

我是移动开发的新手，感觉自己面临的问题超出了我的技能范围。 我一直在学习本教程：https://www.youtube.com/watch?v=d_Vf41Sb0v0&t=4s，以便在我的应用程序中实施谷歌登录。我按照教程中的说明安装了一堆不同的依赖项并配置了应用程序。我没有在

App.js

中编写代码，我为名为

LoginGoogle.js

的组件创建了单独的组件，然后将其放在

LoginPage.js

中。我已经在项目中实施了工作注册，工作正常。当我将

LoginGoogle

组件添加到

LoginPage.js

时，问题开始了

我的错误是：Error: No Firebase App '[DEFAULT]' has been created - call firebase.initializeApp()

但是正如您在

LoginPage.js

中看到的那样，有一个 if 语句代码检查 App 是否已初始化，如果没有则应该初始化它，但它似乎不起作用或者至少对我的

LoginGoogle.js

在教程中我使用了

eas build --profile development --platform android

，但我们正在为跨平台开发应用程序。恐怕在我提交更改后它可能对我的队友不起作用。

这是我的

LoginGoogle

组件

import React, { useState, useEffect } from "react";
import { View } from "react-native";
import {
  GoogleSignin,
  GoogleSigninButton,
} from "@react-native-google-signin/google-signin";
import auth from "@react-native-firebase/auth";

export const LoginGoogle = () => {
  const [initializing, setInitializing] = useState(true);
  const [user, setUser] = useState();

  GoogleSignin.configure({
    webClientId:
      "733350156577-k95ugdida1pt1444monei6t5c3r2d5f7.apps.googleusercontent.com",
  });

  // Handle user state changes
  function onAuthStateChanged(user) {
    setUser(user);
    if (initializing) setInitializing(false);
  }

  useEffect(() => {
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber; // unsubscribe on unmount
  }, []);

  const onGoogleButtonPress = async () => {
    // Check if your device supports Google Play
    await GoogleSignin.hasPlayServices({ showPlayServicesUpdateDialog: true });
    // Get the users ID token
    const { idToken } = await GoogleSignin.signIn();

    // Create a Google credential with the token
    const googleCredential = auth.GoogleAuthProvider.credential(idToken);

    // Sign-in the user with the credential
    const userSignIn = auth().signInWithCredential(googleCredential);
    userSignIn
      .then((user) => {
        console.log(user);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  if (!user) {
    return (
      <View>
        <GoogleSigninButton
          style={{ width: 300, height: 65, marginTop: 300 }}
          onPress={onGoogleButtonPress}
        />
      </View>
    );
  }
};

在这里

LoginPage.js

（我担心导入的依赖项。我不是编写代码的人

LoginPage.js

并且不想更改其导入，因为代码适用于普通用户凭据。）

import { useNavigation } from "@react-navigation/native";
import React, { useState } from "react";
import { View, TextInput, Button, StyleSheet } from "react-native";
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import firebaseConfig from "../../firebaseConfig";
import { LoginGoogle } from "../components/LoginGoogle";

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

const LoginPage = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const navigation = useNavigation();

  const handleLogin = () => {
    firebase
      .auth()
      .signInWithEmailAndPassword(email, password)
      .then((userCredential) => {
        // Signed in
        const user = userCredential.user;
        console.log(user);
        navigation.navigate("HomePage");
        // Navigate to the home screen
      })
      .catch((error) => {
        const errorMessage = error.message;
        console.log(errorMessage);
      });
  };

  const handleRegistrationPress = () => {
    navigation.navigate("Registration");
  };

  const handleForgotPasswordPress = () => {
    navigation.navigate("PasswordResetPage");
  };

  return (
    <View style={styles.container}>
      <TextInput //code/>
      <TextInput //code />
      <Button title="Login" onPress={handleLogin} />
      <Button title="Go to Registration" onPress={handleRegistrationPress} />
      <Button title="Forgot Password?" onPress={handleForgotPasswordPress} />
      <LoginGoogle /> 
    </View>
  );
};

const styles = StyleSheet.create({
 //code
});

export default LoginPage;