陣營本地導航onAuthStateChanged

Question

我想，當火力地堡已經結束在用戶是否被簽署執行導航方法：

/ 



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 is not an object (evaluating '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組件內部，例如身份驗證狀態像這樣：

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> 
     ); 
    } 
}