React Native+React Navigation+Redux搭建

主要参考: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>     }
}
复制代码

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