反應本機和firebase：如何登錄後如何顯示登錄表單？

Question

我的第一個React項目。我想要做的是首先顯示徽標，然後檢查用戶是否登錄。如果是，他們直接進入下一頁。如果不是登錄表單出現在同一頁面的徽標下方。與Facebook應用在打開時的工作方式類似。

我得到了什麼至今使用火力地堡進行身份驗證：

loginCheck(){ 
    const { navigate } = this.props.navigation; 
    firebase.auth().onAuthStateChanged(function(user) { 
     if (user) { 
     navigate('Feed'); 
     } else { 
     return (
      <View style={styles.formContainer}> 
      <FormLabel>Email</FormLabel> 
      <FormInput 
      onChangeText={(email) => this.setState({ email })}/> 
      <FormLabel>Password</FormLabel> 
      <FormInput 
      secureTextEntry 
      onChangeText={(password) => this.setState({ password })}/> 
      <Text style={styles.statusText}>{ this.state.error }</Text> 
      {this.renderButtonOrLoading()} 
      </View> 
     ) 
     } 
    }); 
    } 

    render() { 
    return (
     <KeyboardAvoidingView behavior="padding" style={styles.container}> 
     <View style={styles.loginContainer}> 
      <Image resizeMode="contain" style={styles.logo} source={require('../../components/images/logo.png')} /> 
     </View> 
     {this.loginCheck()} 
     </KeyboardAvoidingView> 
    ); 
    } 
} 

目的是讓一切的loginCheck()的return聲明顯示在渲染，如果用戶沒有登錄我知道我的做法是錯誤的，只是不知道如何去解決它。

的renderButtonOrLoading()看來，做工精細，但是當我在render()用的loginCheck()的return聲明一切替換{this.loginCheck()}。

renderButtonOrLoading(){ 
    if(this.state.loading){ 
     return (<Text style={styles.statusText}>Loading</Text>); 
    } 
    return (
     <View> 
     <Button 
     onPress={this.onLoginPress.bind(this)} 
     title='Login'/> 
     <Button 
     onPress={this.onSignupPress.bind(this)} 
     title='Sign Up'/> 
     </View> 
    ); 
    } 

希望得到任何幫助，一直困住這個問題一段時間。

Answer 1

我的猜測是，你對firebase.auth().onAuthStateChanged()呼叫未及時完成對render - 即你調用Promise但在此之前render被調用它不能解決。如果您在該承諾的.then()區塊內致電setState，您至少會觸發重新渲染，但這仍然意味着您每次致電render時都會提出auth的新請求。我的建議是你auth檢查移到componentDidMount：

componentDidMount() { 
    firebase.auth().onAuthStateChanged(function(user) { 
     if (user) { 
      this.setState({ isAuthorized: true }); 
     } else { 
      this.setState({ isAuthorized: false }); 
    }); 
} 

，然後只用三元運算符中render，以確定要顯示的UI：

render() { 
    ...your base code 
    {this.state.isAuthorized ? navigate('Feed') : <Your Login UI>} 
} 

您也可以看看這個庫 - 身份驗證狀態在應用重新啓動/啓動時持續存在：https://github.com/invertase/react-native-firebase祝您好運！