react-native - 登录按钮检查身份验证，设置状态并导航

对react-native和firebase比较新。试图创建一个允许管理员输入电子邮件和密码的简单表单，单击登录按钮并通过导航器重定向到单独的组件。下面是我到目前为止已经编写的代码：react-native - 登录按钮检查身份验证，设置状态并导航

class AdminLogIn extends Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     loggedIn: false, 
     email: '', 
     password: '', 
     currentError: null 
    } 
    } 

    navigate(routeName){ 
    this.props.navigator.push({ 
     name: routeName, 
    }) 
    } 

    authCheck() { 
    let currentError = this.state.currentError; 
    let _this = this; 
    let email = this.state.email; 
    let password = this.state.password; 
    let loggedIn = this.state.loggedIn; 

    RNRSAuth().signInWithEmailAndPassword(email, password).catch(function(error) { 
     let errorCode = error.code; 
     let errorMessage = error.message; 
     if (errorCode === 'auth/wrong-password') { 
     _this.setState({currentError: errorCode}); 
     } else { 
     _this.setState({currentError: errorMessage}); 
     }; 
    }); 
    console.log(currentError); 
    console.log(loggedIn); 
    console.log(email); 

    } 

    loginButtonClick(authCheck){ 
    let currentError = this.state.currentError; 
    this.authCheck(); 
    if (currentError === null) { 
     this.navigate('adminmenu'); 
     console.log(currentError); 
    } else { 
     console.log(currentError); 
    }; 
    } 

    render() { 
    return (
     <View style={styles.adminLogIn}> 
     <TextInput 
     style={styles.adminLogInField} 
     onChangeText={(email) => this.setState({email})} 
     value={this.state.email} 
     keyboardType="email-address" 
     /> 
     <TextInput 
     style={styles.adminLogInField} 
     onChangeText={(password) => this.setState({password})} 
     defaultValue="Password" 
     value={this.state.password} 
     keyboardType="numeric" 
     /> 
     <Button 
     style={styles.adminLogInButton} 
     title="Log In" 
     onPress={this.loginButtonClick.bind(this) } 
     /> 
     </View> 
    ) 
    } 
} 

export default AdminLogIn;

我最初的反应是使用第三个条件上设置的loggedIn状态设置为true，如果不返回任何错误signInWithEmailAndPassword承诺，但我不如果没有错误，相信它会进入.catch。或者，我正在考虑取消loggedIn状态，并以某种方式使用Navigator返回AdminMenu组件，如果currentError === null。按照当前设置的方式，无论我为电子邮件/密码放置什么内容，都会为currentError返回null，并且它每次都会导航到“adminmenu”。

对于如何调用this.loginButtonClick.bind（this），可能设置状态，然后检查该状态并呈现下一个组件或者吐出currentError，真的可以使用一些指导。提前致谢。

来源

2017-04-18 mcw

彼时废除以上概述，并在此落户的loggedIn/currentError方法，与最初设置为false加载状态：

login() { 
    this.setState({ 
     loading: true 
    }); 
    RNRSAuth().signInWithEmailAndPassword(this.state.email, this.state.password 
    ).then((userData) => 
     { 
     this.setState({ loading: false }); 
     this.navigate('adminmenu'); 
     } 
    ).catch((error) => 
     { 
      this.setState({ loading: false }); 
      alert('Login Failed. Please try again'+error); 
     } 
    ); 
    }

它检查的权威性和该用户是否存在或吐回导航如果他们没有提示错误提示。

来源

2017-04-20 16:57:29 mcw

react-native - 登录按钮检查身份验证，设置状态并导航

回答

相关问题