Reactjs React导航抽屉在使用redux时工作异常 问题

Reactjs React导航抽屉在使用redux时工作异常 问题,reactjs,react-native,react-navigation,Reactjs,React Native,React Navigation,当我打开抽屉时,主屏幕重新打开,而不是抽屉,如下图所示。 当我按下后退按钮并再次打开抽屉时,抽屉打开了。 有两个导航栏。 在我应用redux之前,抽屉正常打开。但是,当我应用redux来响应导航时,导航的行为异常 形象 导航/index.js App.js import React,{Component}来自'React'; 从“react native”导入{平台、样式表、文本、视图}; 从'react redux'导入{Provider}; 从“react navigation”导入{St

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

形象

导航/index.js App.js
import React,{Component}来自'React';
从“react native”导入{平台、样式表、文本、视图};
从'react redux'导入{Provider};
从“react navigation”导入{StackNavigator、DroperNavigator、DroperItems};
从“./存储”导入配置存储;
从“./navigation/index”导入AppNavigation
const{store}=configureStore();
导出默认类App扩展React.Component{
render(){
返回(

谢谢

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