リアクションナビゲーションレビュックスエラーのTabNavigator

Question

リアビデントのTabNavigatorをレビクスで実装しようとしていますが、エラーが発生しています。 未定義はオブジェクトではありません（ 'navigation.state.routes'を評価しています）

私のindex.android.jsとindex.ios.jsはすべて私のapp.jsをポイントしています。

NavigationConfiguration

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

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) 

ストア

：私は次のクラスを作成しました

// Redux 
import { applyMiddleware, combineReducers, createStore } from 'redux' 
import logger from 'redux-logger' 

// Navigation 
import { TabBar, tabBarReducer } from '../navigation/NavigationConfiguration'; 

const middleWare =() => { 
    return applyMiddleware(logger); 
} 

export default createStore(
    combineReducers({ 
    tabBar: tabBarReducer, 
    }), 
    middleWare(), 
) 

のホームスクリーン

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

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

Answer 1

私はついにそれを考え出しました！ TabBarComponentでは、mapStateToPropsを次のように変更しました。

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