使用 firebase 检查 authStatechanged 后对本机导航做出反应答案

【问题标题】：react native navigation after checking the authStatechanged using firebase使用 firebase 检查 authStatechanged 后对本机导航做出反应
【发布时间】：2020-02-02 17:26:36
【问题描述】：

我正在尝试在 loadingScreen 上启动我的应用程序，它会检查是否有任何与 firebase 的会话，这是我尝试了这么多版本但没有任何效果的代码，在我看来这是对 JS 范围缺乏理解

第 2 版

//importing 
import {f,fAuth} from '../../config'

class Loading extends React.Component {
componentDidMount(){

        f.auth().onAuthStateChanged((user)=>{console.log(user);this.nav(user) })

    }

    nav(user)
    {   
        console.log(user)
        if (user===null){
            console.log(user)
            // to login page
            this.props.navigation.navigate('auth')
        }
        else{
            console.log(user)
            // to home page
            this.props.navigation.navigate('main')
        }
    }
}

版本 1

componentDidMount(){
        f.auth().onAuthStateChanged(user=>{th.props.navigation.navigate(user ?'main':'auth')})    
    }

在配置文件中

import firebase from 'firebase';

var firebaseConfig = {
    apiKey: "AIzaSyDYcY1wXll4JI3Gb-qokG6F6KQZB5zzrkg",
    authDomain: "insta-12594.firebaseapp.com",
    databaseURL: "https://insta-12594.firebaseio.com",
    projectId: "insta-12594",
    storageBucket: "insta-12594.appspot.com",
    messagingSenderId: "898455527488",
    appId: "1:898455527488:web:6a749552a9401905de0eec5"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig)

export const  f = firebase;
export const fDb= firebase.database()
export const fAuth= firebase.auth()

【问题讨论】：

我认为您不应该在 SO 上发布您的 api 密钥和关键信息，您可能应该生成一个新密钥。
@FranVanPuffelen 感谢您的宝贵更新

标签： javascript firebase react-native firebase-authentication

【解决方案1】：

你可以这样做

class Loading extends React.Component {

componentDidMount(){
   this.authSubscriber = f.auth().onAuthStateChanged(this.authListener)
}


componentWillUnmount() {
  if (this.authSubscriber) {
    this.authSubscriber();
  }
} 

authListener = async user => {
  if (!user) {
    this.props.navigation.navigate('auth');
  } else {
    this.props.navigation.navigate('main');
  }
};


render(){
   return (
      <View>
          <Text>Loading...</Text>
      </View>
   )
 }
}

【讨论】：

【解决方案2】：

在几次尝试使用state 之后，我观察到状态不会立即更新例如：

state={
      userState:'ha'
      }  

componentDidMount(){
      console.log('up',this.state.userState)
      f.auth().onAuthStateChanged(user=>this.setState({ userState: 'hi' }, () => 
                                       console.log('middle',this.state.userState)))
      console.log('bottom',this.state.userState)
    }

输出将是：

up ha
down ha
middle hi

知道这个事实后，我尝试在this.setState 的回调中调用该函数像这样：

state={
      userState:'ha'
    }  
componentDidMount(){
      f.auth().onAuthStateChanged(user=>this.setState({ userState: user }, () => 
       this.props.navigation.navigate(this.state.userState===null?'auth':'main')))     
    }

【讨论】：