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

【问题标题】：Proper way to navigate with React Native, Redux, and Navigator使用 React Native、Redux 和 Navigator 进行导航的正确方法
【发布时间】：2016-01-08 11:59:44
【问题描述】：

我有一个使用 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] }

如果我只推送 Main 组件，我很好奇为什么 RENDER SCENE 会被调用两次（第一次是 Signin 组件）。

原来在 componentWillReceiveProps 方法中我只是检查：

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

但这会导致Main 组件被推送两次。

【问题讨论】：

Facebook 正在从 Navigator 过渡到 NavigationExperimental，这将是未来支持的导航库。
Facebook 正在过渡到 react-navigation

标签： ios reactjs react-native redux

【解决方案1】：

注意：下面的 GitHub 链接现已弃用，在 cmets 中作者建议react-native-router-flux 是相同的作者。

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

【讨论】：

组件开发已经停止——很遗憾。替代方案不是很好，并且任何其他导航资源都没有很好地记录或举例说明。最坏的情况Navigator 很难绑定到 redux 商店。
@aksonov 您提到的库是极好的库，或者可能是最好的库。但是这里没有人准备好使用已弃用的库开始他们的新项目。所以我强烈建议您更新答案。 :-)
谢谢。 react-native-router-flux 现在有 redux 支持，请使用它:)
@aksonov 你介意我编辑你的问题以反映我们应该使用 react-native-router-flux 吗？我很困惑，因为它们都是你的。

【解决方案2】：

这不是一个 redux 实现，但对于路由，我发现 react-native-router-flux 非常有用。

你可以做一些事情，比如打电话

Actions.login

导航到登录视图。路由在您的索引文件中定义，并具有用于定义导航栏元素的可选架构。

https://github.com/aksonov/react-native-router-flux

【讨论】：

你如何处理有状态的事情？例如，在加载操作时说我的应用程序处于 LOGIN_STATE 状态，所以我想加载登录页面。
只需在您的 react 本机代码中调用 Actions.login()。

【解决方案3】：

1) 是的，将其移至方法，componentWillReceiveProps 可能不正确。很难为您重构该部分，因为我不会从该组件上的该方法中获得该逻辑，即 signinComp 应该接收它是否具有身份验证会话的状态（而不是自己弄清楚）。它导致它无缘无故地被处理；因为如果他登录你重定向。我个人会在 renderScene 中进行检查，因为导航会被传递下来，您只需对子组件进行推送/弹出操作，并在一个 renderScene 中处理您的所有逻辑。

2) 像一副纸牌一样查看导航堆栈。当你设置场景时，它是一张牌，但当你推动它时，另一张牌会添加到牌堆中。因此，当您按下并拥有两张卡片时，它会检查以确保所有卡片都正面朝上并渲染，以便当您按下或弹出时，它会移回已完成的卡片或场景。想象一下立即将 5 个场景压入堆栈。因此，当您更改堆栈时，它会检查以确保所有内容都已呈现并为该后退按钮做好准备。就我个人而言，我认为这不是最优的（但它必须这样做，因为你可以为你推送的每个场景传递不同的属性）。

您可以将这一行更改为：

    renderScene={this.renderScene}

【讨论】：

我发现了一个进行路由的 Redux 项目：github.com/soliury/noder-react-native，当我重构我的代码时，你对第 1 点的回答是正确的。重构后，我的组件更干净，不需要componentWillReceiveProps。此外，由于重构，问题 #2 也消失了。谢谢！
@DennyFerra 如何重构代码？我也需要解决这个问题。

【解决方案4】：

问题1：
我建议您在 shouldComponentUpdate 方法中处理导航器逻辑，如下所示，

   shouldComponentUpdate(nextProps, nextState){

    if(nextProps.isLoggedIn != this.props.isLoggedIn && nextProps.isLoggedIn === true){
        //will redirect
        // do redirect option

        return false;
    }

    return true;
}

问题 2：
我认为这是 react-native 的错误。

【讨论】：