使用React Native,Redux和Navigator进行导航的正确方法

Question

我有一个使用Redux框架的React Native应用程序,我正在使用Navigator组件来处理导航.我在导航工作方面遇到了一些麻烦,我无法找到如何正确操作的好例子,所以我正在寻求一些帮助和澄清.

这是我目前所拥有的要点,这是有效的,但我不知道我是否做得对:

根组件

...
renderScene(route, navigator) {
    console.log('RENDER SCENE', route);
    const Component = route.component;
    return (
        <Component navigator={navigator} route={route} {...this.props} />
    )
}

render() {
    return (
        <Navigator
            renderScene={(route, nav) => this.renderScene(route, nav)}
            initialRoute={{ name: 'Signin', component: Signin }} />
    )
}

登录组件

...
componentWillReceiveProps(nextProps) {
    if (!this.props.signedIn && nextProps.signedIn) {
        console.log('PUSHING TO MAIN');
        nextProps.navigator.push({ name: 'Main', component: Main });
    }
}

问题:

1:我在这里首先想到的是我应该将navigator.push代码移动到一个动作中.然而,这是componentWillReceiveProps行动的正确的地方？Signin加载组件时,如果用户已经有活动会话,则会触发一个操作以登录用户.默认情况下,他们没有登录,所以当下一个道具通过我检查它是否改变然后推送到Main.

2:在"PUSH TO MAIN"记录后立即在我的控制台日志中,我看到两个"RENDER SCENE"日志:

[info] 'RENDER SCENE', { name: 'Signin', component: [Function: Signin] } (EXPECTED)
[info] 'PUSHING TO MAIN'
[info] 'RENDER SCENE', { name: 'Signin', component: [Function: Signin] } (WHY?)
[info] 'RENDER SCENE', { name: 'Main', component: [Function: Main] }

我很好奇为什么RENDER SCENE被调用两次(第一个是Signin组件),如果我只是推动Main组件.

最初在componentWillReceiveProps方法中我只检查:

if (nextProps.signedIn) {
    nextProps.navigator.push({ name: 'Main', component: Main });
}

但这导致Main组件被推动两次.

Answer 1

注意:下面的GitHub链接现已弃用,在作者建议的react-native-router-flux的评论中,该链接由同一作者提供.

我刚刚添加了对Redux的支持,我的新组件https://github.com/aksonov/react-native-redux-router使得导航非常简单,比如调用Actions.login