反応ナビゲーションの TabNavigator を redux で実装しようとしていますが、エラーが発生し続けます。次のエラーが表示されます: 未定義はオブジェクトではありません (「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)
}
}
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);