使用redux时，React导航抽屉的工作方式很奇怪

Question

问题

当我打开抽屉时，主屏幕重新打开，而不是抽屉，如下图所示。 当我按下后退按钮并再次打开抽屉时，抽屉打开。 有两个导航栏。 在我应用redux之前，抽屉正常打开。但是，当我应用redux进行反应导航时，导航行为异常

图像

导航/ index.js

import React, { Component } from "react";
import { BackHandler, AsyncStorage } from "react-native";
import { bindActionCreators } from 'redux';
import { connect } from "react-redux";
import { StackNavigator, DrawerNavigator, addNavigationHelpers, NavigationActions, } from "react-navigation";
import axios from 'axios';
import NavigationStack from "./navigationStack";
import { login } from '../actions/actionCreator';

import * as settings from '../config/settings';


class AppNavigation extends Component {

    async componentDidMount() {
        BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
        // 로컬스토리지 유저정보 유효성을 체크합니다.
        let user_info = await AsyncStorage.getItem('user_info');
        user_info = JSON.parse(user_info);
        if (user_info) {
            fetch(settings.base_uri + "member/profile/", {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Authorization': 'Token ' + user_info.key
                }
            })
            .then((res) => res.json())
            .then((res) => {  
                if (res.email) {
                    console.log('pass user_info');
                    this.props.login();
                } else {
                    console.log('remove user_info');
                    AsyncStorage.removeItem('user_info')
                }
            })
        } else {
            console.log('user is not logined');
        }
    }

    componentWillUnmount() {
        BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
    }

    onBackPress = () => {
        const { dispatch, navigationState } = this.props;
        if (navigationState.stateForLoggedIn.index <= 1) {
            BackHandler.exitApp();
            return;
        }
        dispatch(NavigationActions.back());
        return true;
    };

    render() {
        const { navigationState, dispatch } = this.props;
        const state = navigationState.stateForLoggedIn
        return (
            <NavigationStack navigation={addNavigationHelpers({ dispatch, state })}/>
        );
    }
}

const mapStateToProps = state => {
    return {
        isLoggedIn: state.loginReducer.isLoggedIn,
        navigationState: state.navigationReducer
    };
};

function mapDispatchToProps(dispatch) {
    return Object.assign({ dispatch: dispatch }, bindActionCreators({login: login}, dispatch));
}

export default connect(mapStateToProps, mapDispatchToProps)(AppNavigation);

导航/ navigationStack.js

import { Platform, StyleSheet, Text, View, AsyncStorage, ScrollView } from 'react-native';
import { StackNavigator, TabNavigator, DrawerNavigator, DrawerItems } from 'react-navigation';

import MyRepairWait from '../components/repair/myRepairWait';
import MyRepairProgress from '../components/repair/myRepairProgress';
import MyRepairComplete from '../components/repair/myRepairComplete';
import MySalesWait from '../components/sales/mySalesWait';
import MySalesComplete from '../components/sales/mySalesComplete';
import Home from '../components/home';
import ProductList from '../components/buy/productList';
import PartnerList from '../components/map/partnerList';
import Login from '../components/member/login';
import { CustomDrawerContentComponent } from '../components/drawer';


const MyRepairListTab = TabNavigator({
    wait: { screen: MyRepairWait, navigationOptions: { tabBarLabel: '문의중' } },
    progress: { screen: MyRepairProgress, navigationOptions: { tabBarLabel: '진행중' } },
    complete: { screen: MyRepairComplete, navigationOptions: { tabBarLabel: '완료' } }
    },
    {
        tabBarPosition: 'top',
        swipeEnabled: true,
        animationEnabled: false,
        tabBarOptions: {
            activeTintColor: '#e91e63',
        },
        backBehavior: 'none',
    }
)

const MySalesListTab = TabNavigator({
    wait: { screen: MySalesWait, navigationOptions: { tabBarLabel: '문의중' } },
    complete: { screen: MySalesComplete, navigationOptions: { tabBarLabel: '완료' } }
    },
    {
        tabBarPosition: 'top',
        swipeEnabled: true,
        animationEnabled: false,
        tabBarOptions: {
            activeTintColor: '#e91e63',
        },
        backBehavior: 'none',
    }
)

const baseRoutes = {
    home: { screen: Home },
    productList: { screen: ProductList },
    myRepairList: { screen: MyRepairListTab },
    mySalesList: { screen: MySalesListTab },
    partnerList: { screen: PartnerList },
    login: { screen: Login },
};

const DrawerRoutes = {
    Home: {screen: StackNavigator(baseRoutes, { initialRouteName: 'home' })},
    ProductList: {screen: StackNavigator(baseRoutes, { initialRouteName: 'productList' })},
    MyRepairList: {screen: StackNavigator(baseRoutes, { initialRouteName: 'myRepairList' })},
    MySalesList: {screen: StackNavigator(baseRoutes, { initialRouteName: 'mySalesList' })},
};


const DrawerNavigatorConfig = {
    drawerWidth: 300,
    drawerPosition: 'right',
    contentComponent: CustomDrawerContentComponent,
    contentOptions: {
        activeTintColor: '#e91e63',
        itemsContainerStyle: {
            marginVertical: 0,
        },
        iconContainerStyle: {
            opacity: 1
        }
    }
}

const navigator =
    StackNavigator({
        Drawer: {
            screen: DrawerNavigator(
                DrawerRoutes,
                DrawerNavigatorConfig
            ),
        },
        ...baseRoutes
    },
    //     {
    //         headerMode: 'none'
    //     }
    );


export default navigator;

App.js

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import { Provider } from 'react-redux';
import { StackNavigator, DrawerNavigator, DrawerItems } from 'react-navigation';

import configureStore from "../store";
import AppNavigation from './navigation/index'


const { store } = configureStore();

export default class App extends React.Component{
    render() {
        return(
            <Provider store={store}>
                <AppNavigation />
            </Provider>
        )
    }
}

完整代码

https://bitbucket.org/byunghyunpark/luxlab-user-2/commits/all

谢谢！