在React Native应用中配置React导航和Redux

时间:2019-01-07 17:23:42

标签: react-native

我正在使用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>
    );
   }
  }

0 个答案:

没有答案