react-native - TypeError：无法读取未定义的属性“路由”

Question

我正在使用带有 redux 和 redux-helpers 方法的 React-navigation 4。我们正在尝试使用 NavigationAction 浏览页面，请在下面找到一些详细信息：-

• 我们有三个步骤登录
• 验证联系人号码，然后使用密码/OTP 进行进一步处理

要实现此功能，我必须根据某些条件调度和 NavigationAction。但卡在路由之间。

这是我的ConfigureStore.js

import { createStore, combineReducers, compose, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import logger from 'redux-logger'
import uiReducer from "./reducers/ui";
// import navReducer from "./reducers/nav";
import authReducer from "./reducers/Auth";
import {
  createReactNavigationReduxMiddleware,
  createNavigationReducer,
} from 'react-navigation-redux-helpers';

import Navigator from '../router/router';

const navReducer = createNavigationReducer(Navigator);

const rootReducer = combineReducers({
  ui: uiReducer,
  nav: navReducer,
  auth : authReducer
});


const navMiddleWare = createReactNavigationReduxMiddleware(
  state => state.nav,
);

const configureStore = () => {

  return createStore(rootReducer, applyMiddleware(thunk, logger, navMiddleWare));
};


export default configureStore;

这是Routes.js

import {
    createAppContainer,
    createSwitchNavigator
} from "react-navigation";
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';

import LoginAuthScreen from './../screens/Auth/Login/Login';
import HomeScreen from './../screens/Home/Home';
import WorkoutScreen from './../screens/Workout/WorkoutScreen';
import HistoryScreen from './../screens/History/HistoryScreen';
import StudioScreen from './../screens/Studios/StudioScreen';
import footerComponent from './../component/Footer/Footer';
import AuthLoadingScreen from './../screens/Auth/AuthLoader';
import Step1 from './../screens/Auth/Login/Step1';
import Step2 from './../screens/Auth/Login/Step2';


AuthStack = createStackNavigator({

    Login: {
        screen: LoginAuthScreen,
        navigationOptions: {
            header: null,
        }
    },
    LoginStep1: {
        screen: Step1,
        navigationOptions: {
            header: null,
        }
    },
    LoginStep2: {
        screen: Step2,
        navigationOptions: {
            header: null,
        }
    }

})

TabNavigator = createBottomTabNavigator({
    Home: HomeScreen,
    Workout: WorkoutScreen,
    Studio: StudioScreen,
    History : HistoryScreen
}, {
    tabBarComponent: footerComponent,
});

export default AppRouterConfig = createAppContainer(createSwitchNavigator(
    {
        AuthLoading: AuthLoadingScreen,
        App: TabNavigator,
        Auth: AuthStack,
    },
    {
        initialRouteName: 'AuthLoading',
    }
));

索引.js

import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
import { name as appName } from './app.json';
import configureStore from './src/app/store/configureStore';
import { Provider, connect } from 'react-redux';
import { createReduxContainer } from 'react-navigation-redux-helpers';
import { Root } from 'native-base';
import Navigator from './src/app/router/router';

const store = configureStore();

const App = createReduxContainer(Navigator);

const mapStateToProps = (state) => ({
    nav: state.nav,
});

const mergeProps = (state, dispatch, ownProps) => {
    return ({
        ...ownProps,
        screenProps: {
            ...ownProps.screenProps,
            ...state,
            ...dispatch,
        }
    })
}
const AppWithNavigationState = connect(mapStateToProps, null, mergeProps)(App);

class Main extends Component {

    render() {
        return (
            <Provider store={store}>
                <Root>
                    <AppWithNavigationState />
                </Root>
            </Provider>
        );
    }
}


AppRegistry.registerComponent(appName, () => Main);

标签： react-nativereact-reduxreact-navigation