加载时路由不适用于我的 React 本机应用程序

Question

I am developing a react native project that contain a login system using firebase. The login system working properly. I also managed to capture current user id from the firebase. And i tried to setup a 'keep logged in system using asyncStorage system and current userid. Even the async storage worked properly. but my problem is, I setup a redirection method to home page if async storage is not empty in componentDidMount() . The alert system which i seted for testing clearly showing on each reload the value stored on asyncStorage correctly. But the redirection to home page is not working.

Here is my code:

            import React from 'react';
            import { StyleSheet, 
                    Text, 
                    View, 
                    TouchableOpacity,
                    AsyncStorage,
                    } from 'react-native';
            import {RkTextInput, RkButton } from 'react-native-ui-kitten';
            import {Actions} from 'react-native-router-flux';

            import * as firebase from 'firebase';

            export default class Login extends React.Component {

            constructor(props){
                super(props)

                this.state=({
                email:'savadks1919@gmail.com',
                password:'123123',
                userId:'',
                errorMessage: null
                })
            }

            componentDidMount() {
                this._loadInitialState().done();
            }
                _loadInitialState = async () => {
                let value= await AsyncStorage.getItem('user');
                if (value !== null){
                    this.Home
                }
                }
                signup() {
                Actions.signup()
                }
                Home() {
                Actions.home()
                }

                handleLogin = (email, password) => {

                firebase.auth().signInWithEmailAndPassword(email, password).then(
                    this.Home, 
                    this.state=({userId:firebase.auth().currentUser.uid})
                ).catch(function(error) {
                    var errorCode = error.code;
                    var errorMessage = error.message;

                    if (errorCode === 'auth/wrong-password') {
                        alert('Wrong password.');
                    } else {
                        alert(errorMessage);         
                    }
                    console.log(error);
                });
                //--------------------------Async Test---------------------
                AsyncStorage.setItem('user', this.state.userId);
                //---------------------------------------------------------
                }

            render() {
                return (
                <View style={styles.container}>

                    <Text style={styles.titleText}>Taams</Text>
                    <Text style={styles.edition}>Developer's Edition</Text>
                    <Text style={styles.titleText}>Login.js</Text>
                    <Text>Alpha 0.0.0.1</Text>

                    {/*-----UserName Input-------*/}
                    <RkTextInput 
                        rkType= 'rounded' 
                        labelStyle= {{color: 'black', fontWeight: 'bold'}}
                        placeholder='UserName'
                        //--------------value Handler----------------//
                        onChangeText={(email) => this.setState({email})}

                        //---------------------------------//
                        selectionColor="#000000"
                        keyboardType="email-address"
                        onSubmitEditing={() => { this.password.focusInput(); }}
                        inputStyle={{
                        color: 'black',
                        fontWeight: 'bold',
                        }}/>


                    {/*-----Password-------*/}
                    <RkTextInput 
                        secureTextEntry={true}
                        rkType= 'rounded' 
                        placeholder='Password'
                        //--------------value Handler----------------//
                        onChangeText={(password) => this.setState({password})}

                        //---------------------------------//
                        ref={(input) => { this.password = input; }}
                        inputStyle={{
                        color: 'black',
                        fontWeight: 'bold',
                        }}/>

                    <RkButton onPress = {()=>this.handleLogin(this.state.email,this.state.password)}>
                    <Text style={styles.LoginButtonText}>Login</Text>
                    </RkButton>

                    <View style={styles.signupTextCont}>
                        <Text style={styles.signupText}>Don't have an account yet?</Text>
                        <TouchableOpacity onPress={this.signup}><Text style={styles.signinButton}>SignUp</Text></TouchableOpacity> 
                    </View>
                </View>

                );
            }
            }

            const styles = StyleSheet.create({
            container: {
                flex: 1,
                backgroundColor: '#fff',
                alignItems: 'center',
                justifyContent: 'center',
            },
            signupTextCont:{
                flexGrow: 0,
                alignItems:'center',
                justifyContent:'flex-end',
                marginVertical:15
            },
            signupText:{
                color:'rgba(64,64,64,0.6)',
                fontSize:16
            },
            signinButton:{
                color:'#000000',
                fontSize:16,
                fontWeight:'500'
            },
            titleText: {
                fontSize: 20,
                fontWeight: 'bold',
            },
            edition: {
                fontSize: 15,
                //fontWeight: 'bold',
            },
            TextInput: {
                width: 300,
                height:50,
                borderColor: 'grey',
                borderWidth: 1,
            },
            LoginButtonText: {
                fontSize: 20,
                fontWeight: 'bold',
                color: 'white',
                //alignItems: 'center'

            },
            });

My Router:

        import React, { Component } from 'react';
        import {Router, Stack, Scene} from 'react-native-router-flux';

        import SignUp  from './SignUp/SignUp';
        import Login   from './Login/Login';
        import Home    from "./Home/Home"
        import Profile from "./Profile/Profile"
        export default class Routes extends Component <{}>{
            render(){
                return(
                <Router>
                    <Stack key="root" hideNavBar={true}>
                    <Scene key="login" component={Login} title="Login" initial/>
                    <Scene key="signup" component={SignUp} title="Register" />
                    <Scene key="home" component={Home} title="Home" />
                    <Scene key="profile"component={Profile} title="profile"/> 
                    </Stack>
                </Router>
                )
            }
        }

Answer 1

Change your calling function syntax

if (value !== null){
   this.Home()
 }