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 - 登錄按鈕檢查身份驗證，設置狀態並導航

回答

相關問題