登录后对本地导航做出反应 [英] React Native Navigaton After Login

问题描述

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

在我的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('http://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]) 

这篇关于登录后对本地导航做出反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！