React Native Navigator 路由对象未定义答案

【问题标题】：React Native Navigator Route Object is UndefinedReact Native Navigator 路由对象未定义
【发布时间】：2017-01-05 23:21:12
【问题描述】：

为什么我的 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)

然后在 React Native Navigator 中我这样做...

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

【问题讨论】：

标签： javascript reactjs react-native react-native-navigation

【解决方案1】：

路由在开始时未定义，因为您没有为Navigator 提供任何初始路由。您想设置 initialRoute 或 initialRouteStack 中的任何一个道具。

假设您想从名为 HOME 的路由开始，下面是一个示例，其中路由 { name: 'HOME' } 是内联定义的：

render () {
    return (
        <Navigator
            initialRoute={{ name: 'HOME' }}
            configureScene={this.configureScene}
            renderScene={this.renderScene}
        />
    )
}

【讨论】：

【解决方案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} />
}

【讨论】：

无论哪种方式，路由都是undefined。