Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

react-native+redux+react-navigationテンプレート

More than 1 year has passed since last update.

react-native+redux+react-navigationのテンプレート


制作時に編集するファイルと編集しなくていいファイルを完全に分離したかった。
component、Reducer、Actionファイルを追加して作っていってください。
ベースにしたプログラム:React Navigation(v2)

ソース丸ごとDLしたい人はここ:react-native template
使い方が知りたい人はこっちです:react-native+redux+react-navigationサンプル


App.js ― コンテナとなるファイル。ルートのコンポーネント
navResucer.js  ― react-navigationのためのReducer
pageNation.js  ― react-navigationのnavigatorを作ってる場所。component(ページ)を登録する
allReducer.js ― reducerをまとめるためのファイル。reducerを作ったらここに登録


↓ 編集しないファイル ↓

App.js
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;


navReducer.js
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



↓ 編集するファイル ↓

pageNation.js
import { StackNavigator } from 'react-navigation';

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

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

export default PageNation


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

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

export default allReducers


shoichi1023
とあるIT企業に所属するエンジニアです。 投稿する記事の内容は、個人の見解であり、所属する組織の公式見解ではありません。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away