如何使用Redux处理嵌套的TabNavigator

Question

我的应用程序有一个登录屏幕，当我登录系统时，它显示主屏幕，用户可以切换选项卡来更改屏幕。但现在，如果我点击“历史记录”，它将返回登录屏幕，如何处理？ enter image description here

enter image description here

这是我的路线配置：

const MainScreen = TabNavigator({
    Map:{ screen: Map},
    History:{ screen:History},
});
export const AppNavigator = StackNavigator(
    {
        Main: { screen: MainScreen },
    Login: { screen: LoginScreen },
},
    {
        headerMode:'screen',
    }
);


const AppWithNavigationState = ({dispatch, nav}) => {
    return (
        <AppNavigator navigation={addNavigationHelpers({ dispatch, state: nav })} 
/>  
    );
};


AppWithNavigationState.propTypes = {
    dispatch: PropTypes.func.isRequired,
    nav: PropTypes.object.isRequired,
};

const mapStateToProps = state => ({
    nav: state.nav,
});

export default connect(mapStateToProps)(AppWithNavigationState);

function nav（state = initialNavState，action）{

switch (action.type) {

    case LOGIN:{
        console.log('excute login operator ......',);
        return  AppNavigator.router.getStateForAction(NavigationActions.reset({
            index: 0,
            actions: [
                NavigationActions.navigate({ routeName: 'Main'})
            ]
        }), state);
    }
    case LOGOUT:
        console.log('excute logout operator ......');
        return initialNavState;
    default:
        return initialNavState;
}
}

我发现了问题。如果我单击登录并转到选项卡屏幕，则reducer将触发两次，一次是LOGIN，一次是默认值。我认为默认是tab动作。那么如何在嵌套的TabNavigator中处理tab动作呢？

Answer 1

这是在Github https://github.com/parkerdan/SampleNavigation中使用redux的tabNavigator示例，希望它对您有所帮助。