React Native Navigator路由對象未定義

Question

爲什麼我在React Native Navigator組件中收到route爲undefined的錯誤？我以爲我在推動正確的信息，但我猜不是嗎？任何幫助，將不勝感激。我習慣於使用網絡，所以React Native就是一個轉變。

所以......

我想從我的SplashContainer組件導航到我的SignUpForm組件。因此，在SplashContainer我在本地做出反應導航我做這做這個...

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) 

則...

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

路線開始時未定義，因爲您沒有給Navigator任何初始路線。你想要設置道具initialRoute或initialRouteStack。

假設你想在名爲HOME的路線開始，這裏的地方的路線{ name: 'HOME' }定義內嵌一個例子：

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

Answer 2

正常情況下，導航設置是這樣的：

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} /> 
}