1.添加依赖
2. 配置Navigation
import React from 'react';
import {createStackNavigator, createSwitchNavigator} from 'react-navigation';
import {connect} from 'react-redux';
import {createReactNavigationReduxMiddleware, reduxifyNavigator} from 'react-navigation-redux-helpers';
export const rootCom = 'Init';//设置根路由
export const RootNavigator = createSwitchNavigator({
...
});
/** * 1.初始化react-navigation与redux的中间件, * 该方法的一个很大的作用就是为reduxifyNavigator的key设置actionSubscribers(行为订阅者) * 设置订阅者@https://github.com/react-navigation/react-navigation-redux-helpers/blob/master/src/middleware.js#L29 * 检测订阅者是否存在@https://github.com/react-navigation/react-navigation-redux-helpers/blob/master/src/middleware.js#L97 * @type {Middleware} */
export const middleware = createReactNavigationReduxMiddleware(
state => state.nav,
'root'
);
/** * 2.将根导航器组件传递给 reduxifyNavigator 函数, * 并返回一个将navigation state 和 dispatch 函数作为 props的新组件; * 注意:要在createReactNavigationReduxMiddleware之后执行 */
const AppWithNavigationState = reduxifyNavigator(RootNavigator, 'root');
/** * State到Props的映射关系 * @param state */
const mapStateToProps = state => ({
state: state.nav,//v2
});
/** * 3.连接 React 组件与 Redux store */
export default connect(mapStateToProps)(AppWithNavigationState);
注意
createReactNavigationReduxMiddleware
方法,react-navigation-redux-helpers3.0
后参数顺序发生了变化。2019-04-29 使用了react-navigation-redux-helpers3.0的请注意。否则会报错redux root is not a function (evaluating 'navStateSelector(newState)')
3.配置Reducer
import {combineReducers} from 'redux'
import {rootCom, RootNavigator} from '../../navigators/AppNavigators';
//1.指定默认state
const navState = RootNavigator.router.getStateForAction(RootNavigator.router.getActionForPathAndParams(rootCom));
/** * 2.创建自己的 navigation reducer, */
const navReducer = (state = navState, action) => {
const nextState = RootNavigator.router.getStateForAction(action, state);
// 如果`nextState`为null或未定义,只需返回原始`state`
return nextState || state;
};
/** * 3.合并reducer * @type {Reducer<any> | Reducer<any, AnyAction>} */
const index = combineReducers({
nav: navReducer,
});
export default index;
4.配置store
import {applyMiddleware, createStore} from 'redux'
import reducers from '../redux/index'
import {middleware} from '../../navigators/AppNavigators';
const middlewares = [
middleware,
];
/** * 创建store */
export default createStore(reducers, applyMiddleware(...middlewares));
5.在组件中应用
import AppNavigator from './navigators/AppNavigators'
import React, {Component} from 'react';
import store from './pages/store/index'
import {Provider} from 'react-redux';
type Props = {};
export default class App extends Component<Props> {
render() {
/** * 将store传递给App框架 */
return <Provider store={store}>
<AppNavigator/>
</Provider> }
}
配置成功,各步骤对应文件 如下: