React-Native Firebase SDK

Question

我已经花了 2 天时间尝试让 React Native 和 Firebase 正常工作。我按照 expo 文档上的说明安装了 firebase。我收到错误消息，告诉我来自 firebase 的函数在 expo go 中未定义，但在网络浏览器中它工作正常。这是代码：

import { View, SafeAreaView, TouchableOpacity, Text } from 'react-native';
import { Stack, useRouter } from 'expo-router';

import { COLORS, icons, SIZES } from '../constants';

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider, signInWithRedirect, getRedirectResult } from 'firebase/auth';

const firebaseConfig = {
  //my data
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth();

function Login() {
    const router = useRouter();
    const [loggedIn, setloggedIn] = useState(false);
    var user = false;

    async function handleLogin() {
        const provider = new GoogleAuthProvider();
        signInWithRedirect(auth, provider);
    }
    useEffect(() => {
        getRedirectResult(auth)
            .then((result) => {
                // The signed-in user info.
                user = result.user;
                console.log(user);
                if (result.user) setloggedIn(true);
            }).catch((error) => {
                // Handle Errors here.
                const errorCode = error.code;
                const errorMessage = error.message;
            });
    }, []);

    useEffect(() => {
        if (loggedIn) router.push('main');
    }, [loggedIn]);
    

    return (
        
        <View style={{ flex: 1,padding: SIZES.medium }} >
          <TouchableOpacity onPress={handleLogin}>
            <Text>Login</Text>
          </TouchableOpacity>
        </View>
    );
}

export default Login;```

I have tried a ton of stuff and it just doesnt work. Could it be that I need to build the app completely? Here is expo docs: https://docs.expo.dev/guides/using-firebase/

Answer 1

看起来您正在正确导入 Firebase 函数，但您可能遇到了 getRedirectResult 函数的问题。

getRedirectResult 函数用于从重定向操作中获取成功登录尝试的结果。但是，在您的代码中，您在 useEffect 挂钩中使用空依赖数组调用此函数，这意味着它只会在组件安装时调用一次。

这可能会导致函数在用户有机会登录之前被调用，导致用户变量未定义。因此，loggedIn 状态不会设置为 true，用户也不会被重定向到主屏幕。

要解决此问题，您可以将 getRedirectResult 函数移动到 handleLogin 函数中，并在用户登录后调用它。这将确保仅在需要时调用该函数，并正确更新登录状态。

这是包含这些更改的代码的更新版本：

import { View, SafeAreaView, TouchableOpacity, Text } from 'react-native';
import { Stack, useRouter } from 'expo-router';

import { COLORS, icons, SIZES } from '../constants';

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider, signInWithRedirect, getRedirectResult } from 'firebase/auth';

const firebaseConfig = {
  //your data
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth();

function Login() {
    const router = useRouter();
    const [loggedIn, setLoggedIn] = useState(false);

    async function handleLogin() {
        const provider = new GoogleAuthProvider();
        signInWithRedirect(auth, provider)
            .then(() => {
                getRedirectResult(auth)
                    .then((result) => {
                        // The signed-in user info.
                        const user = result.user;
                        console.log(user);
                        if (result.user) setLoggedIn(true);
                    }).catch((error) => {
                        // Handle Errors here.
                        const errorCode = error.code;
                        const errorMessage = error.message;
                    });
            })
            .catch((error) => {
                // Handle Errors here.
                const errorCode = error.code;
                const errorMessage = error.message;
            });
    }

    useEffect(() => {
        if (loggedIn) router.push('main');
    }, [loggedIn]);
    

    return (
        
        <View style={{ flex: 1,padding: SIZES.medium }} >
          <TouchableOpacity onPress={handleLogin}>
            <Text>Login</Text>
          </TouchableOpacity>
        </View>
    );
}

export default Login;

希望这有帮助...问候