【React Native】react-navigationでbottomTabメニューのdefaultタブを設定する

ライブラリ

• react-navigation
  • doc

やりたいこと

以下の画面構成のとき、MAIN画面にナビゲートされたらTAB 2がinitialで表示されるように

• LOGIN
• MAIN
  • TAB 1
  • TAB 2
  • TAB 3

どうやるか

initialRouteNameをcreateStackNavigator()の第二引数のオブジェクトに設定する

Navigator.js

import Main from './Main';

const Navigator = createStackNavigator(
  {
    'LOGIN': {
      screen: Login,
    },
    'MAIN': {
      screen: Main,
    },
  },
);
export default Navigator;

Main.js

const Main = createBottomTabNavigator({
  'TAB 1': {
    screen: tab1screen,
    navigationOptions: {
      tabBarLabel: 'TAB 1',
    },
  },
  'TAB 2': {
    screen: tab2screen,
    navigationOptions: {
      tabBarLabel: 'TAB 2',
    },
  },
  'TAB 3': {
    screen: tab3screen,
    navigationOptions: {
      tabBarLabel: 'TAB 3',
    },
  },
},{
  // このoptionはBottomTab共通で適用される
  tabBarPosition: 'bottom',
  initialRouteName: 'TAB 2',// ← ココ
  tabBarOptions: {
    activeTintColor: 'red',
    labelStyle: {
      fontSize: 9,
    },
    style: {
      backgroundColor: COLORS.WHITE,
    },
  }
}
export default Main;