react-navigation无法读取reducer中属性'type'的null错误

时间：2017-11-17 04:02:11

标签： react-native redux navigation-drawer react-navigation

项目

我正在使用反应式导航开发绘图导航。 （使用redux）

堆叠并点按嵌套导航正常

错误

如果我添加嵌套抽屉导航，则reducer会抛出错误。

错误屏幕如下所示。

enter image description here

这是我的完整代码

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

错误相关代码

的src /导航/ index.js 

import React, { Component } from "react";
import { BackHandler } from "react-native";
import { connect } from "react-redux";
import { StackNavigator, DrawerNavigator, addNavigationHelpers, NavigationActions } from "react-navigation";

import NavigationStack from "./navigationStack";


class AppNavigation extends Component {
    componentDidMount() {
        BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
    }

    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, isLoggedIn } = this.props;
        const state = isLoggedIn
            ? navigationState.stateForLoggedIn
            : navigationState.stateForLoggedOut;
        return (
            <NavigationStack navigation={addNavigationHelpers({ dispatch, state })}/>
        );
    }
}

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

export default connect(mapStateToProps)(AppNavigation);

的src /导航/ 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';


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: {
        name: 'Home',
        screen: StackNavigator(baseRoutes, { initialRouteName: 'home' })
        },
    ProductList: {
        name: 'ProductList',
            screen: StackNavigator(baseRoutes, { initialRouteName: 'productList' })
            },
    MyRepairList: {
        name: 'MyRepairList',
            screen: StackNavigator(baseRoutes, { initialRouteName: 'myRepairList' })
            },
    MySalesList: {
            name: 'MySalesList',
            screen: StackNavigator(baseRoutes, { initialRouteName: 'mySalesList' })
            },
};


const DrawerNavigatorConfig = {
    drawerWidth: 300,
    drawerPosition: 'right',
    contentComponent: props => <ScrollView><DrawerItems {...props} /></ScrollView>,
    contentOptions: {
        activeTintColor: '#e91e63',
        itemsContainerStyle: {
            marginVertical: 0,
        },
        iconContainerStyle: {
            opacity: 1
        }
    }
}

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


export default navigator;

的src /减速器/ index.js 

import { combineReducers } from 'redux';
import navigationReducer from './navigationReducer';
import loginReducer from './loginReducer';


const AppReducer = combineReducers({
    navigationReducer,
    loginReducer
});

export default AppReducer;

的src /减速器/ navigationReducer.js 

import { NavigationActions } from "react-navigation";

import AppNavigator from "../navigation/navigationStack";
import { Login, Logout } from "../actions/actionTypes";


const ActionForLoggedOut = AppNavigator.router.getActionForPathAndParams(
    "login"
);

const ActionForLoggedIn = AppNavigator.router.getActionForPathAndParams(
    "home"
);

const stateForLoggedOut = AppNavigator.router.getStateForAction(
    ActionForLoggedOut
);

const stateForLoggedIn = AppNavigator.router.getStateForAction(
    ActionForLoggedIn
);

const initialState = { stateForLoggedOut, stateForLoggedIn };



const navigationReducer = (state = initialState, action) => {
    switch (action.type) {
        case "@@redux/INIT":
            return {
                ...state,
                stateForLoggedIn: AppNavigator.router.getStateForAction(
                    ActionForLoggedIn,
                    stateForLoggedOut
                )
            };
    case Login:
        return {
            ...state,
            stateForLoggedIn: AppNavigator.router.getStateForAction(
                ActionForLoggedIn,
                stateForLoggedOut
            )
        };

    case Logout:
        return {
            ...state,
            stateForLoggedOut: AppNavigator.router.getStateForAction(
                NavigationActions.reset({
                    index: 0,
                    actions: [NavigationActions.navigate({ routeName: "login" })]
                })
            )
        };

    default:
        return {
            ...state,
            stateForLoggedIn: AppNavigator.router.getStateForAction(
                action,
                state.stateForLoggedIn
            )
        };
    }
};

export default navigationReducer;

的src /组件/ home.js 

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Button, ImageBackground, TouchableHighlight, Image, ScrollView, Alert, CameraRoll, AsyncStorage } from 'react-native';
import { NavigationActions } from "react-navigation";
import Icon from 'react-native-vector-icons/FontAwesome';
import { connect } from 'react-redux';


const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    mainPhoto: {
        flex: 1,
        margin: 10,
        marginBottom: 0,
        justifyContent: 'center',
    },
    mainPhotoEnd: {
        marginBottom: 10
    },
    mainOpacity: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.5)',
    },
    mainTitle: {
        color: 'white',
        fontSize: 30,
        marginTop: 20,
        marginLeft: 20,
        marginRight: 20,
        fontWeight: '700',
    },
    mainDescription: {
        flex: 2.3,
        marginTop: 5,
        marginLeft: 20,
        marginRight: 20,
        color: 'white',
        fontSize: 15,
        fontWeight: '400',
    },
    alignRight: {
        textAlign: 'right'
    },
    backgroundWhite: {
        flex: 1,
        backgroundColor: 'white'
    },
    headerRight: {
        padding: 10
    },
    headerLeft: {
        padding: 20
    }
});


class HomeScreen extends React.Component {
    navigate1 = () => {
        console.log('click navigate1');
        const navigate1 = NavigationActions.navigate({
            routeName: "partnerList",
            params: { name: "Shubhnik" }
        });
        this.props.navigation.dispatch(navigate1);
    };

    navigate2 = () => {
        console.log('click navigate2');
        const navigate2 = NavigationActions.navigate({
            routeName: "myRepairList",
            params: { name: "Shubhnik" }
        });
        this.props.navigation.dispatch(navigate2);
    };

    static navigationOptions = ({navigation}) => ({
        drawerLabel: () => null,
        title: 'LUXLAB',

        headerStyle: {
            backgroundColor: '#fff',
            borderBottomWidth: 0,
            elevation: 0,
        },
        headerTitleStyle: {
            color: '#000',
            fontSize: 20,
            textAlign: 'center',
            alignSelf: 'center',
        },
        headerRight: <Icon name="bars" size={30} color="#333" onPress={() => navigation.navigate('DrawerOpen')} style={styles.headerRight}/>,
        headerLeft: <Icon name="map-marker" size={30} color="#333" onPress={() => navigation.navigate('partnerList')} style={styles.headerLeft} />
    })

    async componentDidMount() {
        let user_info = await AsyncStorage.getItem('user_info');
        user_info = JSON.parse(user_info).key;
        console.log('storage1', user_info.key);
        console.log('isloggedIn', this.props.isLoggedIn);
    }

    render() {
        return (
            <View style={styles.backgroundWhite}>
                <TouchableHighlight
                    style={styles.container}
                    underlayColor="#fff"
                    onPress={this.navigate1}>
                    <ImageBackground
                        source={require('../assets/imgs/main1.jpg')}
                        style={[styles.mainPhoto, styles.mainOpacity]}>
                        <View style={styles.mainOpacity}>
                            <Text style={styles.mainTitle}>중고 명품 구매</Text>
                            <Text style={styles.mainDescription}>검증받은 다양한 명품들을{"\n"}간편하게 볼 수 있습니다</Text>
                        </View>
                    </ImageBackground>
                </TouchableHighlight>
                <TouchableHighlight
                    style={styles.container}
                    underlayColor="#fff"
                    onPress={this.navigate2}>
                    <ImageBackground
                        source={require('../assets/imgs/main2.jpg')}
                        style={styles.mainPhoto}>
                        <View style={styles.mainOpacity}>
                            <Text style={[styles.mainTitle, styles.alignRight]}>수선 견적 문의</Text>
                            <Text style={[styles.mainDescription, styles.alignRight]}>몇 가지 정보 입력으로{"\n"}수선 견적을 받아보세요</Text>
                        </View>
                    </ImageBackground>
                </TouchableHighlight>
                <TouchableHighlight
                    style={styles.container}
                    underlayColor="#fff"
                    onPress={this.navigate1}>
                    <ImageBackground
                        source={require('../assets/imgs/main3.jpg')}
                        style={[styles.mainPhoto, styles.mainPhotoEnd]}>
                        <View style={styles.mainOpacity}>
                            <Text style={styles.mainTitle}>중고 명품 판매</Text>
                            <Text style={styles.mainDescription}>몇 가지 정보 입력으로{"\n"}매매 견적을 받아보세요</Text>
                        </View>
                    </ImageBackground>
                </TouchableHighlight>
            </View>
        )
    }
}


const mapStateToProps = state => ({
    isLoggedIn: state.loginReducer.isLoggedIn
});

const Home = connect(mapStateToProps, null)(HomeScreen);

export default Home;

谢谢！

0 个答案:

没有答案
相关问题
最新问题