Waza Lab

React Native Router Fluxでタブの履歴を残す方法

Apr 23, 2017 | 1 minute read

InstagramのようにAndoridのバックボタンで前のタブに戻るようにするためにどのタブが前のタブか知る必要があります。React Native Router Flux(with Redux)を使っていて、これを実現するために下記のようなReducerを作りました。

const initialState = {
  scene: {},
  tabHistory: [],
};

export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    // focus action is dispatched when a new screen comes into focus
    case "focus":
      return {
        ...state,
        scene: action.scene,
      };

    case 'REACT_NATIVE_ROUTER_FLUX_FOCUS':   
      if(action.scene.name === "tabBar"){
        if(state.tabHistory.length === 0 || state.tabHistory[0] !== action.scene.children[action.scene.index].name){
          return {
            ...state,
            tabHistory: [action.scene.children[action.scene.index].name, ...state.tabHistory ].slice(0, 10)
          }
        }
      }

やってることは、FOCUSしたときにtabHistoryとして、Arrayに追加してるだけです。無限に履歴を残す必要はないので10個で制限してますが、もしかしたら2つでいいかもしれません(最初の要素は現在のタブになるので二つ以上は必要)

で、これを下記みたいな感じでBackAndroidで使用すれば良いでしょう。

  handleAndroidBack(){
    const tabHistory = store.getState().router.tabHistory;
    if(tabHistory.length > 1){ // 0 is the current tab
      const previousTab = tabHistory[1];
      switch(previousTab){
        case "feeds":
          Actions.feeds();
          return true;
        case "discussion":
          Actions.discussion();
          return true;
        case "profile":
          Actions.profile();
          return true;
        case "notification":
          Actions.notification();        
          return true;
        case "others":
          Actions.others();
          return true;
      }
    }
   return false;          
  }

Related Posts