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