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