Hice una pantalla de inicio de sesión para mi aplicación y una página de inicio. Mi objetivo es almacenar si el usuario ha iniciado sesión y, si lo está, no enviarlo a través de la página de inicio de sesión, sino directamente a la página principal. Encontré una manera en línea, usando este método que se muestra en el código. Pero a pesar de que la función funciona (registra "conectado" o "no conectado" correctamente. Siempre me envía directamente a la página de inicio... ¿Qué estoy haciendo mal?
import React from "react"; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import HomeScreen from "../screens/HomeScreen"; import Login from "../screens/Login"; import * as SecureStore from 'expo-secure-store'; const AuthStack = () => { const AuthStack = createNativeStackNavigator(); async function isLoggedIn(key) { let result = await SecureStore.getItemAsync(key); if (result !== null) { alert("🔐 Here's your value 🔐 \n" + result); console.log("logged in"); return true; } else { alert('No values stored under that key.'); console.log("not logged in"); return false; } } return ( <AuthStack.Navigator> { isLoggedIn("access_token") ? ( <> <AuthStack.Screen name = "HomeScreen" component={HomeScreen}/> </> ) : ( <> <AuthStack.Screen name = "Login" component={Login} options={{ title: 'Log In', headerStyle: { backgroundColor: '#212521' }, headerTintColor: '#fff', headerTitleStyle: { fontWeight: 'bold', }, }} /> </> ) } </AuthStack.Navigator> ); }; export default AuthStack;Su función es asíncrona, por lo tanto, en el primer procesamiento no tendrá cargada la información para decidir si debe o no mostrar la pantalla de inicio o la pantalla de inicio de sesión. Debe recuperar los datos, no devolver nada hasta que se carguen los datos y luego desencadenar un cambio de estado que provocará una nueva representación.
Esto podría implementarse de la siguiente manera.
const [isSignedIn, setSignedIn] = useState() React.useEffect(() => { const loggedIn = async () => { const t = await SecureStore.getItemAsync(key) setSignedIn(t !== null ? true : false) } loggedIn() }, []) // maybe show a loading indicator if (isSignedIn === undefined) { return null } return ( <AuthStack.Navigator> { isSignedIn? ( <> <AuthStack.Screen name = "HomeScreen" component={HomeScreen}/> </> ) : ( <> <AuthStack.Screen name = "Login" component={Login} options={{ title: 'Log In', headerStyle: { backgroundColor: '#212521' }, headerTintColor: '#fff', headerTitleStyle: { fontWeight: 'bold', }, }} /> </> ) } </AuthStack.Navigator> );