React Native Navigate onAuthStateChanged

Question

我正在尝试在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 (
      <View>
        <TouchableHighlight onPress={ this.navigate.bind(this,'register')} style={styles.button}>
          <Text style={styles.buttonText}>
            Logiiiiiiin
          </Text>
        </TouchableHighlight>
      </View>
    );
  }
}
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 <LoginScreen navigator = {navigator}/>
     }
     if(route.name == 'register'){
       return <RegisterScreen navigator = {navigator}/>
     }
   }

   render() {
     return (

       <View style={styles.container}>

       <Navigator
          initialRoute={{name: 'login'}}
          renderScene={this.renderScene.bind(this)}
        />

       </View>
     )
   }
}

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

目前我收到以下错误：

undefined 不是对象（评估 'this.props.navigator.push'）

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

Answer 1

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

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

相反，您可以将代码放在Login组件中以侦听 firebase 身份验证状态，例如：

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 (
            <View>
                <TouchableHighlight onPress={ this.navigate.bind(this,'register')} style={styles.button}>
                    <Text style={styles.buttonText}>
                        Logiiiiiiin
                    </Text>
                </TouchableHighlight>
            </View>
        );
    }
}