Question

我正在开发一个React本机项目，其中包含使用Firebase的登录系统。登录系统正常运行。我还设法从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()
 }

在我的React本机应用程序上加载时路由不起作用

1 个答案: