Reactive Native Navigator Route Objekt ist nicht definiert

Question

Warum erhalte ich eine Fehlermeldung, dass route in meiner React Native Navigator-Komponente undefined ist? Ich dachte, ich würde die richtigen Informationen pushen, aber ich denke nicht? Jede Hilfe wäre willkommen. Ich bin es gewohnt, mit dem Internet zu arbeiten, daher ist React Native die richtige Wahl.

So ...

ich von meiner SplashContainer Komponente zu meiner SignUpForm Komponente navigieren möchten. So in SplashContainer ich dies tun ...

class SplashContainer extends Component { 
    handleLoginFinished =() => { 
     this.props.dispatch(handleAuthWithFirebase()) 
    } 
    handleToSignUp =() => { 
     this.props.navigator.push({ 
      signUpForm: true 
     }); 
    } 
    handleToSignIn =() => { 
     this.props.navigator.push({ 
      signIn: true 
     }) 
    } 
    render() { 

     return (
      <Splash onLoginFinished={this.handleLoginFinished} goToSignUp={this.handleToSignUp} goToSignIn={this.handleToSignIn} /> 
     ) 
    } 
} 

export default connect()(SplashContainer) 

Dann im Reagieren india Navigator ich dies tun ...

export default class NimbusNavigator extends Component { 
    static propTypes = { 
     isAuthed: PropTypes.bool.isRequired 
    } 
    renderScene = (route, navigator) => { 
     // Keeps track of whether user is Authed or not. 
     if (this.props.isAuthed === false) { 
      return <SplashContainer navigator={navigator}/> 
     } else if (route.signUpForm === true) { 
      return <SignUpForm navigator={navigator}/> 
     } 

     return <FooterTabsContainer navigator={navigator} /> 
    } 
    configureScene = (route) => { 

    } 
    render() { 
     return (
      <Navigator 
       configureScene={this.configureScene} 
       renderScene={this.renderScene} 
      /> 
     ) 
    } 
} 

Answer 1

Die Route ist beim Start nicht definiert, da Sie die anfänglichen Routen nicht angegeben haben. Sie möchten eine der Stützen initialRoute oder initialRouteStack einstellen.

Vorausgesetzt, dass Sie mit dem Namen HOME auf einer Route starten möchten, hier ist ein Beispiel, wo die Route { name: 'HOME' } inline definiert:

render() { 
    return (
     <Navigator 
      initialRoute={{ name: 'HOME' }} 
      configureScene={this.configureScene} 
      renderScene={this.renderScene} 
     /> 
    ) 
} 

Answer 2

Normalerweise wird die Navigation wie folgt aufgebaut:

handleToSignUp =() => { 
     this.props.navigator.push({ 
      name: 'signUpForm' 
     }); 
    } 

//

renderScene = (route, navigator) => { 
    // Keeps track of whether user is Authed or not. 
    if (this.props.isAuthed === false) { 
     return <SplashContainer navigator={navigator}/> 
    } else if (route.name === 'signUpForm') { 
     return <SignUpForm navigator={navigator}/> 
    } 

    return <FooterTabsContainer navigator={navigator} /> 
}