#javascript #react-native #authentication #asyncstorage
Вопрос:
Я подготовил структуру для операций входа в систему, но после выполнения AsyncStorage.setItem в функции выхода из системы приложение автоматически не перенаправляется на сторону AuthStorage. Он остается на той странице, на которой был. Я испытываю то же самое при входе в систему, и при входе в систему я устанавливаю setItem («true»), но все равно остаюсь на странице, на которой нахожусь, но когда я обновляю приложение, происходит перенаправление.
App.js
import React, { useEffect, useState } from 'react'; import { NavigationContainer } from '@react-navigation/native' import AppNavigator from './components/auth/AppNavigator'; import AuthNavigator from './components/auth/AuthNavigator' import AuthStorage from './components/auth/storage'; const App = () =gt; { const [loginStatus, setLoginStatus] = useState(false); useEffect(() =gt; { readData(); }, []); const readData = async () =gt; { try { const isLoggedIn = JSON.parse(await AuthStorage.getItem()); console.log(isLoggedIn); if (isLoggedIn !== null) { setLoginStatus(isLoggedIn); } } catch (e) { alert('Failed to fetch the data from storage'); } }; return ( lt;NavigationContainergt; {loginStatus ? lt;AppNavigator /gt; : lt;AuthNavigator /gt;} lt;/NavigationContainergt; ); }; export default App; AuthNavigator.js
import React from "react"; import { createStackNavigator } from "@react-navigation/stack"; import OnboardScreen from '../auth/OnboardScreen' import LoginScreen from '../auth/LoginScreen' import RegisterScreen from '../auth/RegisterScreen' const Stack = createStackNavigator(); const AuthNavigator = () =gt; { return ( lt;Stack.Navigator initialRouteName="Onboard" screenOptions={{ headerShown: false }} independent={false}gt; lt;Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} /gt; lt;Stack.Screen name="Register" component={RegisterScreen} options={{ headerShown: false }} /gt; lt;Stack.Screen name="Onboard" component={OnboardScreen} options={{ headerShown: false }} /gt; lt;/Stack.Navigatorgt; ); }; export default AuthNavigator; AppNavigator.js
import React from "react"; import { StatusBar, Image, StyleSheet, TouchableOpacity, View, ActivityIndicator } from 'react-native' //Main pages import HomeScreen from '../../components/main/HomeScreen' import SearchScreen from '../../components/main/SearchScreen' import FavoriteScreen from '../../components/main//FavoriteScreen' import AddPetScreen from '../../components/main/AddPetScreen' import MessageScreen from '../../components/main/MessageScreen'; import PetDetailScreen from '../../components/main/PetDetailScreen' import EditPetScreen from '../../components/main/EditPetScreen' import ProfileScreen from '../../components/main/ProfileScreen'; import EditProfileScreen from '../../components/main/EditProfileScreen'; import PassivePets from '../../components/main/PassivePets'; import { createStackNavigator } from "@react-navigation/stack"; import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"; import * as Animatable from 'react-native-animatable'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons' import { COLORS, images } from '../../constants' const { plus } = images; import { observer } from 'mobx-react'; import { mainStore } from '../store/storeMain'; const Tab = createBottomTabNavigator(); const CustomTabBarButton = ({ children, onPress, navigation }) =gt; ( lt;Animatable.View animation="slideInUp"gt; lt;TouchableOpacity onPress={onPress} style={{ top: -20, justifyContent: 'center', alignItems: 'center', ...styles.shadow }} gt; lt;View style={{ width: 70, height: 70, borderRadius: 35, backgroundColor: COLORS.bottomColor }}gt; {children} lt;/Viewgt; lt;/TouchableOpacitygt; lt;/Animatable.Viewgt; ) //Tab bar const HomeTabs = () =gt; { const { userName, imageUser, loading } = mainStore; return ( lt;Tab.Navigator initialRouteName="Home" tabBarOptions={{ activeTintColor: COLORS.appColor, showLabel: false, }} gt; lt;Tab.Screen name="Home" component={HomeScreen} options={{ tabBarIcon: ({ color }) =gt; ( lt;MaterialCommunityIcons name="home" color={color} size={30} /gt; ), }} /gt; { userName ? ( lt;gt; lt;Tab.Screen name="Favorites" component={FavoriteScreen} options={{ tabBarIcon: ({ color }) =gt; ( lt;MaterialCommunityIcons name="bookmark-outline" color={color} size={30} /gt; ), }} /gt; lt;Tab.Screen name="AddPet" component={AddPetScreen} options={{ tabBarIcon: ({ focused, color }) =gt; ( lt;Image source={plus} resizeMode="contain" style={{ width: 30, height: 30, tintColor: COLORS.white // tintColor: "#fff" }} /gt; ), tabBarButton: (props) =gt; ( lt;CustomTabBarButton {...props} onPress={() =gt; navigation.navigate('AddPet')} /gt; ) }} /gt; lt;Tab.Screen name="Message" component={MessageScreen} options={{ tabBarIcon: ({ color }) =gt; ( lt;MaterialCommunityIcons name="inbox" color={color} size={30} /gt; ) }} /gt; lt;Tab.Screen name="Profile" component={ProfileScreen} options={{ tabBarIcon: ({ color, size }) =gt; ( imageUser ? ( loading ? ( lt;ActivityIndicator size={20} color="black" /gt; ) : ( lt;Image style={{ borderRadius: 30, width: 30, height: 30 }} source={{ uri: imageUser }} /gt; ) ) : ( lt;Image style={{ borderRadius: 30, width: 30, height: 30 }} source={require('../../assets/images/avatar-4.jpg')} /gt; ) ) }} /gt; lt;/gt; ) : ( null ) } lt;/Tab.Navigatorgt; ); }; const Stack = createStackNavigator(); const AppNavigator = () =gt; { return ( lt;Stack.Navigator initialRouteName="HomeTabs" screenOptions={{ headerShown: false }} independent={false}gt; lt;Stack.Screen name="HomeTabs" component={HomeTabs} /gt; lt;Stack.Screen name="Profile" component={ProfileScreen} options={{ headerShown: false }} /gt; lt;Stack.Screen name="EditProfile" component={EditProfileScreen} options={{ headerShown: false }} /gt; lt;Stack.Screen name="AddPet" component={AddPetScreen} options={{ headerShown: false }} /gt; lt;Stack.Screen name="PetDetail" component={PetDetailScreen} options={{ headerShown: false }} /gt; lt;Stack.Screen name="EditPet" component={EditPetScreen} options={{ headerShown: false }} /gt; lt;Stack.Screen name="PassivePets" component={PassivePets} options={{ headerShown: false }} /gt; lt;Stack.Screen name="Search" component={SearchScreen} options={{ headerShown: false }} /gt; lt;Stack.Screen name="Favorite" component={FavoriteScreen} options={{ headerShown: false }} /gt; lt;Stack.Screen name="Home" component={HomeScreen} options={{ headerShown: false }} /gt; lt;/Stack.Navigatorgt; ); }; export default AppNavigator; const styles = StyleSheet.create({ shadow: { shadowColor: '#7F5DF0', shadowOffset: { width: 0, height: 10, }, shadowOpacity: 0.2, elevation: 5, shadowRadius: 3.5 } }) AuthStorage.js
import AsyncStorage from '@react-native-async-storage/async-storage'; const AuthToken = 'loggedIn'; const storeItem = async (value) =gt; { try { await AsyncStorage.setItem(AuthToken, JSON.stringify(value)); return true; } catch (e) { return false; } }; const getItem = async () =gt; { try { const jsonValue = await AsyncStorage.getItem(AuthToken); return jsonValue != null ? JSON.parse(jsonValue) : null; } catch (e) { return null; } }; export default { storeItem, getItem }; Выход()
const signOut = async () =gt; { await AuthStorage.storeItem('false').then(() =gt; console.log('Clear')) }
Комментарии:
1. используйте некоторые глобальные состояния, которые могут решить вашу проблему. Во-вторых, вы должны очистить AsyncStorage при выходе, а не сохранять другую переменную.
2. если я использую mobx или redux, это решит проблему, верно? и спасибо за совет для ясности, я забыл добавить 🙂 @Kailash
3. const [LoginStatus, setLoginStatus] = useState(false);, достигните этого с помощью mobx, этот логин должен быть вашим состоянием, а setLoginStatus должен быть методом обновления состояния Логин. Вы можете обновить статус входа с любого экрана. Это приведет вас к вашему решению.