我正在将React-navigation 4与redux和redux-helpers方法一起使用。我们正在尝试使用NavigationAction浏览页面,请在下面找到一些详细信息:-
要实现此功能,我必须根据某些条件调度和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',
}
));
Index.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);