使用 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] }

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

同样最初在 componentWillReceiveProps 方法中我只是检查：

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

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

Answer 1

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

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

您可以将此行更改为：

    renderScene={this.renderScene}

Answer 2

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

您可以打电话给

Actions.login

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

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

Answer 3

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 使导航变得非常简单，比如调用 Actions.login

Answer 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的bug。

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

Proper way to navigate with React Native, Redux, and Navigator

ios

reactjs

react-native

redux