React Native导航onAuthStateChanged

当Firebase断定用户是否已登录时,我正在尝试执行导航方法:

/



import React, { Component, PropTypes } from 'react';
import * as firebase from 'firebase';
import {
  AppRegistry,
  Image,
  StyleSheet,
  TextInput,
  Navigator,
  TouchableHighlight,
  Button,
  Text,
  View
} from 'react-native';



firebase.initializeApp({
});

 class Login extends Component {



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

  constructor(props) {
    super(props);
    this.state = {
      username_text: 'Username',
      password_text: 'Password'
    };
  }


  render() {



    return (
      

        
          
            Logiiiiiiin
          
        
      
    );
  }
}

firebase.auth().onAuthStateChanged(user => {
  if (!user) {
    var login = new Login(navigator);
    login.navigate(this,'register')
  }
});


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  background: {
    flex: 1,
    resizeMode: 'cover'
  },
  button: {
    height: 50,
    backgroundColor: '#000000',
    alignItems: 'center',
    marginTop: 10,
    justifyContent: 'center'
  },
  buttonText: {
    fontSize: 22,
    color: '#FFF',
    alignSelf: 'center'
  }
});

export default Login

索引文件:

import React, { Component } from 'react';
import {
  AppRegistry,
  Image,
  StyleSheet,
  TextInput,
  Navigator,
  TouchableHighlight,
  Button,
  Text,
  View
} from 'react-native';

import LoginScreen from './login';
import RegisterScreen from './register';







 class Test extends Component {


   renderScene(route, navigator){
     console.log(route);
     if(route.name == 'login'){
       return 
     }
     if(route.name == 'register'){
       return 
     }

   }


   render() {

     return (



       


       


       

     )
   }
}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});

AppRegistry.registerComponent('Test', () => Test);

目前我收到以下错误:

undefined不是对象(评估'this.props.navigator.push')

指着navigate方法的this.props.navigator.push({路线

您Login以两种方式创建组件,其中一种是错误的:

firebase.auth().onAuthStateChanged(user => {
    if (!user) {
        var login = new Login(navigator); // <-- Navigator is not defined!!
        login.navigate(this,'register')
    }
});

相反,您可以将代码放在Login组件内部监听firebase auth状态,例如:

class Login extends Component {

    constructor(props) {
        super(props);
        this.state = {
            username_text: 'Username',
            password_text: 'Password'
        };
    }

    componentWillMount() {
        // Add listener here
        this.unsubscribe = firebase.auth().onAuthStateChanged(user => {
            if (!user) {
                this.navigate('register');
            }
        });
    }

    componentWillUnmount() {
        // Don't forget to unsubscribe when the component unmounts
        this.unsubscribe();
    }

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

    render() {
        return (
            
                
                    
                        Logiiiiiiin
                    
                
            
        );
    }
}