¿Por qué recibo un error de que la route no está undefined en mi componente React Native Navigator? Pensé que estaba presionando la información correcta, pero supongo que no. Cualquier ayuda sería apreciada. Estoy acostumbrado a trabajar con la web, por lo que React Native es todo un cambio.
Asi que...
Quiero navegar desde mi componente SplashContainer a mi componente SignUpForm . Así que en SplashContainer hago esto...
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)Luego, en React Native Navigator hago esto...
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} /> ) } }La ruta no está definida al inicio porque no le dio al Navigator ninguna ruta inicial . Desea configurar cualquiera de los accesorios initialRoute o initialRouteStack .
Suponiendo que desea comenzar en una ruta con el nombre HOME, aquí hay un ejemplo donde la ruta { name: 'HOME' } se define en línea:
render () { return ( <Navigator initialRoute={{ name: 'HOME' }} configureScene={this.configureScene} renderScene={this.renderScene} /> ) }Normalmente la navegación se configura así:
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} /> }