加載時路由不適用於我的 React 本機應用程序

Question

我正在開發一個包含使用 firebase 的登錄系統的 React Native 項目。 登錄系統工作正常。 我還設法從 firebase 中捕獲了當前用戶 ID。 我嘗試使用 asyncStorage 系統和當前用戶 ID 設置一個“保持登錄系統”。 甚至異步存儲也能正常工作。 但我的問題是，如果componentDidMount()異步存儲不為空，我會設置一個到主頁的重定向方法。 我為測試設置的警報系統在每次重新加載時都清楚地顯示了存儲在asyncStorage上的值。 但是重定向到主頁不起作用。

這是我的代碼：

            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'

            },
            });

我的路由器：

        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

更改您的調用函數語法

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