我正在使用React Native设置新应用,并使用react导航获取路线,并使用redux来管理状态,但是不,我在导航中存在一些错误,并且应用无法编译 你有没有与反应导航2.18.2和redux 4.0.1一起工作的人
我正在尝试react-navigation-redux-helpers并逐步引导但无法正常工作并显示此错误
无法读取未定义的属性'getStateForAction'
此Router.js
class Router extends Component {
render() {
const Render = createRootNavigator();
return (<Render screenProps={1}/>);}}
export default Router
export const AppStack = createBottomTabNavigator(
{Home: {
screen: Home,
navigationOptions: {
tabBarIcon: ({tintColor, focused}) => (
<View
style={[global.tabRouteWrapper, focused ? {backgroundColor: tintColor} : {backgroundColor: 'transparent'}]}>
<IconFontAwesome name="home" color={focused ? theme.white : theme.black} size={30}/>
</View>
),
showLabel: false
},
},
Message: {
screen: Message,
navigationOptions: {
tabBarIcon: ({tintColor, focused}) => (
<View
style={[global.tabRouteWrapper, focused ? {backgroundColor: tintColor} : {backgroundColor: 'transparent'}]}>
<IconFontAwesome name="wechat" color={focused ? theme.white : theme.black} size={30}/>
</View>),
showLabel: false,
drawerLockMode: 'locked-closed'
}
},
RequestSubmitt: {
screen: SubmittRequest,
navigationOptions: {
tabBarIcon: ({ tintColor, focused }) => (
<View style={[global.tabRouteWrapper, focused ? { backgroundColor: tintColor } : { backgroundColor: 'transparent' }]} >
<IconAntDesign name="pluscircleo" color={focused ? theme.white : theme.black} size={30} />
</View>),
showLabel: false,
}
},
Articles: {
screen: Article,
navigationOptions: {
tabBarIcon: ({ tintColor, focused }) => (
<View style={[global.tabRouteWrapper, focused ? { backgroundColor: tintColor } : { backgroundColor: 'transparent' }]} >
<IconFontAwesome name="file-text-o" color={focused ? theme.white : theme.black} size={30} />
</View>),
showLabel: false,
}
},
Profile: {
screen: Profile,
navigationOptions: {
tabBarIcon: ({ tintColor, focused }) => (
<View style={[global.tabRouteWrapper, focused ? { backgroundColor: tintColor } : { backgroundColor: 'transparent' }]} >
<IconFontAwesome name="user" color={focused ? theme.white : theme.black} size={30} />
</View>),
showLabel: false,
}
},
},
options);
export const createRootNavigator = () => {
let initialRouteName = 'AppStack';
return createSwitchNavigator(
{ AppStack:AppStack},
{initialRouteName}
);
};
此App.js
import React, {Component} from 'react';
import Router from './utils/Navigations/routes';
import {Root} from "native-base";
import createSagaMiddleware from 'redux-saga'
import {connect, Provider} from 'react-redux'
import rootSaga from "./utils/Redux-Saga/rootSaga";
import {createStackNavigator} from "react-navigation";
import {createReactNavigationReduxMiddleware,reduxifyNavigator
} from "react-navigation-redux-helpers";
import appReducer from "./utils/Redux/Reducers";
import {applyMiddleware, createStore} from "redux";
const initialState = Router.router.getStateForAction(Router.router.getActionForPathAndParams(Home));
const navReducer = (state = initialState, action) => {
const nextState = Router.router.getStateForAction(action, state);
return nextState || state;
};
const appReducer = combineReducers({
nav: navReducer,
});
const sagaMiddleware =createSagaMiddleware();
const middleware = createReactNavigationReduxMiddleware(
"root",
state => state.nav,
);
const AppState = reduxifyNavigator(Router, "root");
const mapStateToProps = (state) => ({
state: state.nav,
});
const store = createStore(
rootSaga,
appReducer,
applyMiddleware(middleware,sagaMiddleware),
);
const AppWithNavigationState = connect(mapStateToProps)(AppState);
export default class App extends Component<Props> {
render()
return (
<Provider store={store}>
<AppWithNavigationState/>
</Provider>
);
}
}