RN项目中react-navigation与react-redux集成使用指南

安装依赖包

1.yarn add react-navigation
2.yarn add react-navigation-redux-helpers

创建自己的导航器

1.navigator.js

//导入自己的页面
import Login from '../views/Login/Login';
import ForgetPass from '../views/Login/ForgetPass'
//导入创建函数
import {createStackNavigator,createAppContainer, createSwitchNavigator} from 'react-navigation';
//react-navigation-redux-helpers为集成时必须使用的插件，目的是将navigator映射至redux中
import {createReactNavigationReduxMiddleware, createReduxContainer} from 'react-navigation-redux-helpers';
// connect作用是将props或dispatch映射至组件中
import {connect} from 'react-redux';

//创建导航器
const loginNav = createStackNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      header: null
    }
  },
  ForgetPass: {
    screen: ForgetPass,
    navigationOptions: {
      header: null
    }
  },
})
// 所有创建导航器都需使用createAppContainer包裹
export const RootNavigator = createAppContainer(loginNav);
// 创建react-navigation到redux的中间件（必需步骤）
	//其中nav是reducers中的state名称
	//root是自定义名称
export const middleware = createReactNavigationReduxMiddleware(
  state => state.nav,
  'root',
);
/*
 * 2.将根导航器组件传递给 reduxifyNavigator 函数,
 * 并返回一个将navigation state 和 dispatch 函数作为 props的新组件；
 * 注意：要在createReactNavigationReduxMiddleware之后执行
 */
const AppWithNavigationState = createReduxContainer(RootNavigator, 'root');
/**
 * State到Props的映射关系
 * @param state
 */
const mapStateToProps = state => ({
  state: state.nav,
});
//rootCom 在reducer.js中通过函数查找到该导航器初始state
export const rootCom = 'init'
/**
 * 3.连接 React 组件与 Redux store
 */
const AppNavigator = connect(mapStateToProps)(AppWithNavigationState);

export default () => (<AppNavigator />)

2.reducer.js

import {combineReducers} from 'redux'
import {rootCom, RootNavigator} from 'navigator.js';
//1.指定默认state
const navState = RootNavigator.router.getStateForAction(RootNavigator.router.getActionForPathAndParams(rootCom));
const navReducer = (state = navState, action) => {
      const nextState = RootNavigator.router.getStateForAction(action, state);
      return nextState || state;
 }
 /**
 * 3.合并reducer
 * @type {Reducer<any> | Reducer<any, AnyAction>}
 */
const index = combineReducers({
    nav: navReducer,
});