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