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：在我的控制台日志中，紧跟在主播之后＆＃39;记录了我看到两个＆＃39; RENDER SCENE＆＃39;日志：

[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组件被推送两次。

Answer 1

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

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

Actions.login

导航到登录视图。路由在索引文件中定义，并具有可选的模式来定义导航栏元素。

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

Answer 2

1）是的，将其移至方法，componentWillReceiveProps可能不正确。很难为你重构那个部分，因为我不会在该组件上使用该方法的那个逻辑，即signinComp应该接收它是否具有auth会话的状态（并且不为其自身计算）。它导致它无缘无故地被处理;因为如果他登录你重定向。我个人会在renderScene中检查，因为nav传递下来你可以在子组件上进行push / pop并在一个renderScene中处理所有逻辑。

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

您可以将此行更改为：

    renderScene={this.renderScene}

Answer 3

问题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，Redux和Navigator进行导航的正确方法

3 个答案: