Kann Navigator.push nicht in Hauptroute Komponente

Question

verwenden Ich bin neu, native reagieren und der Titel kann unklar sein.

Problem: kann this.props.navigator.push in checkLoggedInToken() Funktion unten nicht verwenden. Es sagt this.props.navigator is undefined Aber ich kann die gleiche Funktion in Login und Signup Komponente verwenden.

Frage: Möglicherweise kann ich in dieser Hauptwegklasse nicht auf den Navigator wie diesen zugreifen. Was ist der richtige Weg?

Unten ist mein vereinfachte Codes

class AwesomeProject extends Component { 

    constructor(props){ 
    super(props); 
    this.state = { 
     loaded: false 
    }; 
    this.checkLoggedInToken(); 
    } 

    renderScene(route, navigator) { 
    if(route.id === "Signup"){ 
     return <Signup navigator={navigator} /> 
    } 

    if(route.id === "Login"){ 
     return <Login navigator={navigator} /> 
    } 
    } 

    render() { 
     return (
     <Navigator 
      style={ styles.container } 
      renderScene={ this.renderScene } 
      initialRoute={{ id : 'Signup' , name : 'SIGNUP' }} /> 
    ); 
    } 

    checkLoggedInToken(){ //Check token online with the stored one that is it legal , not expired 
    this.props.navigator.push({ 
     id: 'Home', 
    }); 
    } 

Answer 1

Ich denke, dass Sie Ihr Haus in renderScene und die Funktion checkLoggedInToken sollte in der componentDidMount Funktion aufgerufen werden enthalten sollte.

class AwesomeProject extends Component { 

    constructor(props){ 
    super(props); 
    this.state = { 
     loaded: false 
    }; 
    } 

    componentDidMount() { 
    this.checkLoggedInToken(); 
    } 

    renderScene(route, navigator) { 
    if(route.id === "Signup"){ 
     return <Signup navigator={navigator} /> 
    } 

    if(route.id === "Login"){ 
     return <Login navigator={navigator} /> 
    } 

    if (route.id === "Home") { 
     return <Home navigator={navigator} /> 
    } 
    } 

    render() { 
     return (
     <Navigator 
      ref={(navigator) => this.navigator = navigator} 
      style={ styles.container } 
      renderScene={ this.renderScene } 
      initialRoute={{ id : 'Signup' , name : 'SIGNUP' }} /> 
    ); 
    } 

    checkLoggedInToken(){ //Check token online with the stored one that is it legal , not expired 
    this.navigator.push({ 
     id: 'Home', 
    }); 
    } 
} 

Answer 2

Ich denke ..., um Navigator in Ihrer Funktion checkLoggedInToken() zuzugreifen. Sie müssen den Navigator mithilfe von Referenzen referenzieren.

ur render() sollte so sein ...

render(){ 
    return (
    <Navigator 
     ref={(ref) => this.navigator = ref} 
     style={ styles.container } 
     renderScene={ this.renderScene } 
     initialRoute={{ id : 'Signup' , name : 'SIGNUP' }} /> 
); 
} 

jetzt u Navigator in checkLoggedInToken() Funktion zugreifen können ..

checkLoggedInToken(){ 
    this.navigator.push({ 
    id: 'Home', 
    }); 
}