CODEWITHSUNDEEP
react-nativereact-reduxreact-navigation
Leon Guo
Leon Guo

Reputation: 11

How to deal the nested TabNavigator with Redux

My app has a login screen, and when I m login system, It show the Main screen, and user can switch the tabs to change the screen. but now, if i tap the 'History', it will back to the Login Screen, how to handle this? enter image description here

enter image description here

this is my route config :

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;
}
}

I find the problem. if I click login and go to the Tab screen, the reducer will trigger twice，one is LOGIN and one is default. I think the default is the tab action. So how to deal the tab action in the nested TabNavigator ?

Upvotes: 1

Views: 1918

Answers (1)

Tyreal Gray
Tyreal Gray

Reputation: 373

here is a tabNavigator example with redux in Github https://github.com/parkerdan/SampleNavigation, hope it could be helpful to you.

Upvotes: 3

Related Questions