React Native+React Navigation+Redux搭建

1,615 阅读1分钟

主要参考:React Native+React Navigation+Redux开发实用教程

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>     }
}

配置成功,各步骤对应文件 如下: