使用React Native + Redux + React Navigation的模板

我想在制作时完全分离需要编辑和不需要编辑的文件。
请添加组件、Reducer和Action文件进行开发。
基于的程序：React Navigation(v2)。

如果想要完整下载源代码的人，请点击这里：react-native模板
如果想要了解如何使用的人，请点击这里：react-native+redux+react-navigation示例

App.js是一个容器文件。它是根组件。
navReducer.js是为了react-navigation而创建的Reducer。
pageNation.js是创建react-navigation导航器的地方。在这里注册组件（页面）。
allReducer.js是用来整合reducer的文件。当创建一个reducer时，请在此处注册。

不进行编辑的文件

import React from 'react';
import { addNavigationHelpers, } from 'react-navigation';
import { createReduxBoundAddListener, createReactNavigationReduxMiddleware, } from 'react-navigation-redux-helpers';
import { createStore, applyMiddleware, } from 'redux';
import { Provider, connect, } from 'react-redux';
import PageNation from './pageNation';
import allReducers from './allReducers';

//reduxとreact-navigationの橋渡し
const middleware = createReactNavigationReduxMiddleware(
    'root',
    state => state.nav,
  );

//storeを作成
const store = createStore(allReducers, applyMiddleware(middleware));

//ページ遷移命令を受け取るためのリスナー
const addListener = createReduxBoundAddListener('root');

//stateを各コンポーネントに渡すための枠組み
class App extends React.Component {
  render() {
    return (
      //container・・・ページ遷移のための枠組み
      <PageNation navigation={addNavigationHelpers({
        dispatch: this.props.dispatch,
        state: this.props.nav,
        addListener,
      })} />
    );
  }
}

//stateをAppコンポーネントに混ぜ込むときの形式を設定
const mapStateToProps = (state) => ({
  nav:state.nav,
});

//connect...stateやdispachを受け取る、受け渡す形式を決める
const Container = connect(mapStateToProps)(App);


//storeをAppに受け渡すための枠組み
class Root extends React.Component {
  render(){
    return (
        <Provider store={ store }>
          <Container />
        </Provider>
      );
  }
}

export default Root;

import PageNation, { rootCom } from './pageNation';

//現在のページのstateを取得
const navState = PageNation.router.getStateForAction(PageNation.router.getActionForPathAndParams(rootCom));

const navReducer = (state = navState, action) => {
  //次のページのstateを取得
  const nextState = PageNation.router.getStateForAction(action,state);
  //次のページがあればnextStateを、なければstateを返す
  return nextState || state;
};

export default navReducer

↓ 编辑文件 ↓

import { StackNavigator } from 'react-navigation';

export const rootCom = '';//ここにルート要素のキーを設定
//const rootCom = 'Page1';

//ページ⇔コンポーネント対応表
const PageNation = StackNavigator({
/*
  Page1: {
    screen: Page1,
  },
  Page2: {
    screen: Page2,
  },
*/
});

export default PageNation

import { combineReducers } from 'redux';
import navReducer from './navReducer';

//Reducerをまとめる
const allReducers = combineReducers({
  nav: navReducer,
  /*
  r1: reducer1,
  r2: reducer2,
        .
        .
        .
        .
  */
});

export default allReducers