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

原文 标签 ios reactjs react-native redux

我有一个使用 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将代码转化为 Action 。然而是componentWillReceiveProps采取行动的正确位置?当Signin组件被加载,如果用户已经有一个事件 session ,它会触发一个操作来登录用户。默认情况下他们没有登录,所以当下一个 Prop 通过时我检查它是否改变然后推送到 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] }

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

同样最初在 componentWillReceiveProps我只是检查的方法:
if (nextProps.signedIn) {
    nextProps.navigator.push({ name: 'Main', component: Main });
}

但这导致了 Main要推送两次的组件。

最佳答案

NOTE: The GitHub link below is now deprecated, in the comments the author suggested react-native-router-flux which is by the same author.



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

关于ios - 使用 React Native、Redux 和 Navigator 进行导航的正确方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33056858/

相关文章:

javascript - 在React应用程序中映射对象数组时出错

javascript - Chrome中的getBoundingClientRect返回相同的值

javascript - 将 Native JSON 对象解析为 SliderBox 的 url

react-native webview 没有出现

ios - 使用分段请求上传文件-Swift 4

ios - 何时请求访问事件?

ios - SpriteKit TableView

ios - 如何获得自动布局以覆盖UIImageView的固有大小?

javascript - 有什么办法可以将JavaScript函数从src文件夹导入到React组件之外

javascript - camera.takePictureAsync(options) 不是 native 相机的 react 功能