登录后对本地导航做出反应

本文介绍了登录后对本地导航做出反应的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

请帮我解决一个问题。我不明白如何实现登录后重定向到主页。我需要刷新应用才能执行此操作。

在我的app.js中，我有一个const isSigned，它从AsyncStorage中获取一个值，当它不为空时，应用程序应该呈现‘home’组件，但它没有

登录正常后，我可以获取令牌并将其保存到AsyncStorage。

app.js：

import React, {useState, useEffect} from 'react'; import {ActivityIndicator, SafeAreaView, StyleSheet, Text, View} from 'react-native'; import AsyncStorage from '@react-native-async-storage/async-storage'; import { createDrawerNavigator } from '@react-navigation/drawer'; import { NavigationContainer } from '@react-navigation/native'; const Drawer = createDrawerNavigator(); import Login from './src/Login' import Home from './src/Home' export default function App() { const [isSigned, setIsSigned] = useState(false) useEffect(() => { AsyncStorage.getItem('token').then((value) => { if (value) { setIsSigned(true) } }); }), [] return ( <NavigationContainer> <Drawer.Navigator> {isSigned ? ( <> <Drawer.Screen name="Home" component={Home} /> </> ) : ( <> <Drawer.Screen name="Login" component={Login} /> </> )} </Drawer.Navigator> </NavigationContainer> ); }

login.js

import React, {useState} from "react"; import {Text, View, SafeAreaView, TextInput, Button, StyleSheet} from 'react-native'; import AsyncStorage from '@react-native-async-storage/async-storage'; export default function Login() { const [username, setUsername] = useState('') const [password, setPassword] = useState('') const storeToken = async (value) => { try { await AsyncStorage.setItem('token', value) } } function submitHandler() { const requestOptions = { body: JSON.stringify({ "Username": username, "Password": password }) }; fetch('127.0.0.1:8080/login', requestOptions).then((response) => { return response.json(); }).then((result) => { if (result !== '' && result !== 'error') { storeToken(result) } }).catch(function (error) { console.log("ERROR: ", error); }) } return ( <SafeAreaView> <TextInput defaultValue={username} onChangeText={text => setUsername(text)} placeholder={'Username'} style={styles.input} /> <TextInput defaultValue={password} onChangeText={text => setPassword(text)} placeholder={'Password'} secureTextEntry={true} style={styles.input} /> <Button title={'Login'} onPress={submitHandler} /> </SafeAreaView> ) } 推荐答案 useEffect(() => { AsyncStorage.getItem('token').then((value) => { if (value) { setIsSigned(true) } }); }), []

您的useEffect代码错误。应该是这样的：

useEffect(() => { AsyncStorage.getItem('token').then((value) => { if (value) { setIsSigned(true) } }); },[isSigned])

这会告诉Reaction，只要isSigned发生更改，就重新呈现组件。因此，您不必刷新页面，Reaction将自动重新呈现。

任何在组件内部定义或作为道具传入组件的变量都必须放在useEffect的依赖项数组中。

useEffect(() => { AsyncStorage.getItem('token').then((value) => { if (value) { setIsSigned(true) } }); },[])

在ARRAY[]中，我们存储依赖项。我们告诉Reaction，如果任何依赖项发生更改，则重新呈现组件。如果只传递空数组[]，这表示在挂载应用程序时将只调用useEffect一次。但如果您修改数组：

useEffect(() => { AsyncStorage.getItem('token').then((value) => { if (value) { setIsSigned(true) } }); },[isSigned])