React Navigation の階層

React Navigationを使ってナビゲーションの階層（ネスティング）を作ります。

React Navigatorの使い方で基本的なナビゲーションの作り方をみました。

[ReactNative]React Navigatorの基本

今回はナビゲーションの中にナビゲーションをネストさせて階層のあるナビゲーションを作ってみます。まずは基本的なStackNavigatorを作ります。

const MainTabNavigator = StackNavigator({
  Welcome: {
    screen: WelcomeScreen,
    navigationOptions: {
      header: null,
    }
  },
  Auth: {
    screen: AuthenticationScreen,
    navigationOptions: {
    header: null,
    }
  },
  Main: {
    screen: HomeScreen,
    navigationOptions: {
    header: null,
    }
  },
});

このMainのHomeScreenをTabで切り替えられるようにします。MainのスクリーンにTabNavigatorを追加して、HomeScreenとGoalScreenを切り替えられるようにします。

const MainTabNavigator = StackNavigator({
  Welcome: {
    screen: WelcomeScreen,
    navigationOptions: {
      header: null,
    }
  },
  Auth: {
    screen: AuthenticationScreen,
    navigationOptions: {
    header: null,
    }
  },
  Main: {
    screen: TabNavigator({
      Home: {
        screen: HomeScreen,
        navigationOptions: {
          tabBarLabel: 'ホーム',
        }
      },
      Goal: {
        screen: GoalScreen,
        navigationOptions: {
          tabBarLabel: '目標',
        }
      }
    })
  }
});

これを2つに分けて、次のように書いても同じです。

const MainTabNavigator = StackNavigator({
  Welcome: {
    screen: WelcomeScreen,
    navigationOptions: {
      header: null,
    }
  },
  Auth: {
    screen: AuthenticationScreen,
    navigationOptions: {
    header: null,
    }
  },
  Main: {
    screen: MainNavigator
  }
});

const MainNavigator = TabNavigator({
      Home: {
        screen: HomeScreen,
        navigationOptions: {
          tabBarLabel: 'ホーム',
        }
      },
      Goal: {
        screen: GoalScreen,
        navigationOptions: {
          tabBarLabel: '目標',
        }
      },
    })

今回のようにStackNavigatorの中にTabNavigatorをネストさせる場合はいいのですが、
TabNavigatorの中にTabNavigatorをネストさせるとエラーになりました。
そのあたりは次回まとめたいと思います。