找不到变量：用户。我正在使用 firebase auth 和最新的 SDK、expo SDK 42、react navigation 6.x.x

Question

import React, { useEffect } from "react";
import { StyleSheet, Text, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import LoginScreen from "./screens/LoginScreen";
import SignUpScreen from "./screens/SignUpScreen";
import WelcomeScreen from "./screens/WelcomeScreen";
import OnBoard from "./screens/Onboard";
import GetStarted from "./screens/GetStarted";
import { auth } from "./firebase";

const Stack = createNativeStackNavigator();

export default function App() {
  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      console.log(user);
      return user;
    });
    return unsubscribe;
  }, []);

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {user ? (
          <>
            <Stack.Screen
              options={{ headerShown: false }}
              name="OnBoard"
              component={OnBoard}
            />
            <Stack.Screen
              options={{ headerShown: false }}
              name="SignUp"
              component={SignUpScreen}
            />
            <Stack.Screen
              options={{ headerShown: false }}
              name="Login"
              component={LoginScreen}
            />
          </>
        ) : (
          <Stack.Screen
            options={{ headerShown: false }}
            name="Welcome"
            component={WelcomeScreen}
          />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

找不到变量：用户， 我也无法理解我是 react-native 和 react-navigation 的新手。我尝试了返回用户但没有划线或其他东西。

试过

const isLoggedIn = user;
console.log(isLoggedIn)

它只是记录未定义。 有人可以帮我吗？

我正在使用 firebase auth 和最新的 SDK、expo SDK 42、react navigation 6.x.x 当应用程序加载并且用户通过身份验证时，使用条件渲染隐藏 onBoarding、logIn 和 signUp 屏幕，因此他直接对welcomeScreen 进行操作

链接到世博小吃。在您的设备上运行它而不是在网络上。 https://snack.expo.dev/@bishalsaha/a638cf

Answer 1

提示：您可能需要重新生成您在评论中公开的 api 密钥！

假设您的身份验证工作正常并且您的登录 useEffect 没有未定义，您的应用可能会修复您处理用户变量的方式：

export default function App() {
  const [isLoggedIn, setIsLoggedIn] = React.useState(false);
  const [user, setUser] = React.useState();
  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((receivedUser) => {
      console.log(receivedUser);
      setUser(receivedUser);
      setIsLoggedIn(true);
    });
    unsubscribe();
  }, []);

  // Check your logs
  console.log(user);
  console.log(isLoggedIn);

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {user ? (
          <>
            <Stack.Screen
              options={{ headerShown: false }}
              name="OnBoard"
              component={OnBoard}
            />
            <Stack.Screen
              options={{ headerShown: false }}
              name="SignUp"
              component={SignUpScreen}
            />
            <Stack.Screen
              options={{ headerShown: false }}
              name="Login"
              component={LoginScreen}
            />
          </>
        ) : (
          <Stack.Screen
            options={{ headerShown: false }}
            name="Welcome"
            component={WelcomeScreen}
          />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

编辑： 根据您关于重新加载后保持状态的问题：

正如React Native Docs 中提到的，存储状态是由称为 AsyncStorage 和 Secure Storage 的东西提供的。 异步存储适用于所有适用于 graphql 或持久状态管理的东西。

由于您的用户电子邮件和密码属于敏感数据类别，我强烈建议您使用expo-secure-storage。 如果您不想进行重构，我会在您提供的示例中更改 handleLogin 函数：

import * as SecureStore from 'expo-secure-store';

// [your components code]

 const handleLogin = () => {
    let data = await SecureStore.getItemAsync(userCredsKey);
    userCreds = userCreds ? JSON.parse(data)
    if (!userCreds) {
      userCreds = { email: email, password: password };
    }
    auth
      .signInWithEmailAndPassword(userCreds.email, userCreds.password)
      .then((userCredentials) => {
        const user = userCredentials.user;
        console.log("Logged in with:", user.email);
        //login successfull
        await SecureStorage.setItemAsync(userCredsKey, JSON.stringify(userCreds));
      })
      .catch((error) => alert(error.message));
  };

注意：以上代码仅展示了如何在重新加载应用程序后使用安全存储和登录用户的想法。 您可能想在这里走另一条路，或者甚至更好地将逻辑与专用服务文件中的组件解耦:-)

Answer 2

使用本地存储

我遇到了同样的问题，我使用本地存储来保存用户数据，在刷新或重新加载应用程序时，将从本地存储中获取数据。这就是我在网络上处理问题的方式。

// useState
    const [currentUser, setCurrentUser] = useState(() => {
      const data = localStorage.getItem("currentUser"); // Get data from local storage when the app is reloaded or refreshed. If there is some data in local storage the app will use that.
      return data ? JSON.parse(data) : {};
    });



// useEffect
seEffect(() => {
  const unsubscribe = auth.onAuthStateChanged(user => {
    localStorage.setItem("currentUser", JSON.stringify(user)); // Saving user to your app local storage
    setCurrentUser(user);
  })
  return unsubscribe
}, [])