Я сделал экран входа в систему для своего приложения и домашнюю страницу. Моя цель — сохранить, вошли ли пользователи в систему, и если он есть, не отправлять его через страницу входа, а прямо на главную страницу. Я нашел способ в Интернете, используя этот метод, показанный в коде. Но даже несмотря на то, что функция работает (она корректно регистрирует «вошел в систему» или «не вошел в систему». Она все равно всегда отправляет меня прямо на домашнюю страницу... Что я делаю неправильно?
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.info("logged in");
return true;
}
else {
alert('No values stored under that key.');
console.info("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;
Ваша функция является асинхронной, поэтому при первом рендеринге в нее не будет загружена информация, чтобы решить, следует ли ей отображать HomeScreen или LoginScreen. Вам нужно получить данные, ничего не вернуть, пока данные не будут загружены, а затем инициировать изменение состояния, которое вызовет повторную визуализацию.
Это может быть реализовано следующим образом.
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>
);
Спасибо!!! Застрял на этом в течение нескольких часов и работает отлично!