Exception 使用redux错误响应导航选项卡Navigator

我试图用redux实现react navigation的TabNavigator，但我一直遇到错误。我现在得到以下错误： undefined不是对象（正在评估“navigation.state.routes”）

我的index.android.js和index.ios.js都指向我的app.js

我创建了以下类：

导航配置

import {
  TabNavigator
} from 'react-navigation';

// Default colors class
import colors from '../config/colors';

// Tab-Navigators
import MapScreen from '../screens/MapScreen';
import ScanScreen from '../screens/ScanScreen';
import HomeScreen from '../screens/HomeScreen';
import HistoryScreen from '../screens/HistoryScreen';
import LanguageSelectScreen from '../screens/LanguageSelectScreen';

const routeConfiguration = {
  Home:           { screen: HomeScreen },
  LanguageSelect: { screen: LanguageSelectScreen },
  History:        { screen: HistoryScreen },
  Map:            { screen: MapScreen },
  Scan:           { screen: ScanScreen },
}

const tabBarConfiguration = {
  swipeEnabled: false,
  animationEnabled: true,
  tabBarOptions: {
    showLabel: false,
    showIcon: true,
    inactiveTintColor: colors.grey2,
    activeTintColor: colors.selectedTabColor,
  }
}

export const TabBar = TabNavigator(routeConfiguration,tabBarConfiguration)

export const tabBarReducer = (state,action) => {
  if (action.type === 'JUMP_TO_TAB') {
    return { ...state, index:0 }
  } else {
    return TabBar.router.getStateForAction(action,state)
  }
}

// React
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    Image,
    View
} from 'react-native';

class HomeScreen extends Component {
  static navigationOptions = {
    tabBar: {
      label: 'Home',
      icon: ({ tintColor }) => (
        <MaterialIcons color={tintColor} name='home' size={26} />
      ),
    },
  }

  constructor(props) {
    super(props);
  }

  render(){
    return (
      <View>
      </View>
    )
  }
}

export default HomeScreen;

TabBarComponent

// React
import React, { Component } from 'react';

// Navigation
import { addNavigationHelpers } from 'react-navigation'
import { TabBar } from '../navigation/NavigationConfiguration'

//Redux
import { connect } from 'react-redux'

const mapStateToProps = (state) => {
 return {
   navigationState: state.Home,
  }
}

class TabBarComponent extends Component {
  render() {
    return (
      <TabBar
        navigation={
        addNavigationHelpers({
          dispatch: this.props.dispatch,
          state: this.props.navigationState,
        })
      }
      />
    )
  }
}

export default connect(mapStateToProps)(TabBarComponent)

主屏幕

import {
  TabNavigator
} from 'react-navigation';

// Default colors class
import colors from '../config/colors';

// Tab-Navigators
import MapScreen from '../screens/MapScreen';
import ScanScreen from '../screens/ScanScreen';
import HomeScreen from '../screens/HomeScreen';
import HistoryScreen from '../screens/HistoryScreen';
import LanguageSelectScreen from '../screens/LanguageSelectScreen';

const routeConfiguration = {
  Home:           { screen: HomeScreen },
  LanguageSelect: { screen: LanguageSelectScreen },
  History:        { screen: HistoryScreen },
  Map:            { screen: MapScreen },
  Scan:           { screen: ScanScreen },
}

const tabBarConfiguration = {
  swipeEnabled: false,
  animationEnabled: true,
  tabBarOptions: {
    showLabel: false,
    showIcon: true,
    inactiveTintColor: colors.grey2,
    activeTintColor: colors.selectedTabColor,
  }
}

export const TabBar = TabNavigator(routeConfiguration,tabBarConfiguration)

export const tabBarReducer = (state,action) => {
  if (action.type === 'JUMP_TO_TAB') {
    return { ...state, index:0 }
  } else {
    return TabBar.router.getStateForAction(action,state)
  }
}

// React
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    Image,
    View
} from 'react-native';

class HomeScreen extends Component {
  static navigationOptions = {
    tabBar: {
      label: 'Home',
      icon: ({ tintColor }) => (
        <MaterialIcons color={tintColor} name='home' size={26} />
      ),
    },
  }

  constructor(props) {
    super(props);
  }

  render(){
    return (
      <View>
      </View>
    )
  }
}

export default HomeScreen;

//反应
从“React”导入React，{Component}；
进口{
样式表，
文本，
形象,，
看法
}从“反应本机”；
类主屏幕扩展组件{
静态导航选项={
选项卡栏：{
标签：“家”，
图标：（{tintColor}）=>(
),
},
}
建造师（道具）{
超级（道具）；
}
render（）{
返回(
)
}
}
导出默认主屏幕；

app.js

// React
import React, { Component } from 'react';
import {
  AppRegistry,
  View
} from 'react-native';

// Redux
import { Provider } from 'react-redux';
import store from './config/store';

// Navigation
import TabBarComponent from './components/TabBarComponent';

class GeoFort extends Component {
  render() {
    return (
      <Provider store={store}>
        <TabBarComponent />
      </Provider>
    )
  }
}

AppRegistry.registerComponent('GeoFort', () => GeoFort);

//反应
从“React”导入React，{Component}；
进口{
评估学，
看法
}从“反应本机”；
//重演
从'react redux'导入{Provider}；
从“/config/store”导入存储；
//航行
从“./components/TabBarComponent”导入TabBarComponent；
类GeoFort扩展组件{
render（）{
返回(
)
}
}
AppRegistry.registerComponent（'GeoFort'，（）=>GeoFort）；

我终于明白了！在TabBarComponent中，我将mapStateToProps更改为：

const mapStateToProps = (state) => {
 return {
   navigationState: state.tabBar,
  }
}