Reactive Native Rendering gleiche Route

Question

Ich möchte Routen auf Knopfdruck in React Native ändern. In meiner SplashContainer Komponente ist dies die Methode, die ich renne:

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

Meine Navigator Komponente wie diese

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

sieht Wenn route nicht gleich 'signUpForm' ist, sollte auf die else if Anweisung nicht Code überspringen und Rendern <SignUpForm/> Komponente?

Danke!

Answer 1

Es gibt ein paar Möglichkeiten, dies zum Laufen zu bringen, aber die Hauptsache ist, dass alles, was an navigator.push({ // properties of the route object }) übergeben wurde, zu Eigenschaften des route-Objekts wird.

Zum Beispiel, wenn Sie Ihre handleSignUp Methode, um die Art und Weise halten Sie es, würden Sie Ihre renderScene Methode, wie so neu schreiben müssen:

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

Sie können auch Ihre handleSignUp Methode wie folgt umschreiben:

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

Und renderScene wie folgt aus:

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