找不到变量：user.I 我正在使用 firebase 身份验证和最新的 SDK，expo SDK 42，反应导航 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>
  );
}

找不到变量：用户，我也不明白我是反应本机和反应导航的新手。我尝试返回用户，但未显示任何内容。

尝试过

const isLoggedIn = user;
console.log(isLoggedIn)

它只是记录undefined。任何人都可以帮助我吗？

我正在使用 firebase auth 和最新的 SDK，expo SDK 42，react navigation 6.x.x 在应用程序加载并且用户通过身份验证时使用条件渲染来隐藏登机、登录和注册屏幕，因此他直接对 welcomeScreen

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

Answer 1

提示：您可能想要重新生成您的 api 密钥，就像您在评论中 public 所做的那样！

假设您的身份验证工作正常并且您的登录 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 和安全存储的东西提供的。异步存储适用于 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
}, [])

找不到变量：user.I 我正在使用 firebase 身份验证和最新的 SDK，expo SDK 42，反应导航 6.x.x

can't find variable: user.I am using firebase auth and the latest SDK, expo SDK 42, react navigation 6.x.x

firebase

react-native

firebase-authentication

react-navigation

expo