React Native呈現相同的路由

Question

我想在React Native按鈕按下時更改路由。在我SplashContainer成分，這是我運行方法：

handleToSignUp =() => { 
    console.log("Running handleToSignUp") 
    this.props.navigator.push({ 
     signUpForm: true 
    }); 
} 

我的導航組件看起來像這樣

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

     return <FooterTabsContainer navigator={navigator} /> 
    } 
    configureScene = (route) => { 
     return Navigator.SceneConfigs.FloatFromRight 
    } 
    render() { 
     return (
      <Navigator 
       configureScene={this.configureScene} 
       renderScene={this.renderScene} 
      /> 
     ) 
    } 
} 

如果route不等於'signUpForm'不應代碼跳到else if聲明，渲染<SignUpForm/>組件？

謝謝！

Answer 1

有幾種方法可以使這個工作，但要記住的主要事情是，所有傳遞到navigator.push({ // properties of the route object })成爲路由對象的屬性。

舉例來說，如果你把你的handleSignUp方法事情是這樣的，你需要重寫你的renderScene方法，像這樣：

renderScene = (route, navigator) => { 
    if (this.props.isAuthed === false && !route.signUpForm) { 
     return <SplashContainer navigator={navigator}/> 
    } else if (route.signUpForm) { 
     return <SignUpForm navigator={navigator} /> 
    } 

    return <FooterTabsContainer navigator={navigator} /> 
} 

你也可以重寫你的handleSignUp方法是這樣的：

handleToSignUp =() => { 
    this.props.navigator.push({ 
     title: 'handleSignUpForm' 
    }); 
} 

而且renderScene這樣的：

renderScene = (route, navigator) => { 
    if (this.props.isAuthed === false && route.title !== 'signUpForm') { 
     return <SplashContainer navigator={navigator}/> 
    } else if (route.title === 'signUpForm') { 
     return <SignUpForm navigator={navigator} /> 
    } 

    return <FooterTabsContainer navigator={navigator} /> 
}