How to add StackNavigator for TabNavigator?

Question

I have a app that need both StackNavigator and TabNavigator. The logic is:

const App = StackNavigator({
    Welcome: {
        screen: Welcome
    },
    Login: {
        screen: Login
    },
    Register: {
        screen: Register
    },
    Auth: {
        screen: Auth
    },
    Home: {
        screen: Main
    },
});

const Main = TabNavigator({
  Home: { screen: Home },
  Dash: { screen: Dash},
  Myself: { screen: Myself},
  });

const Pages = StackNavigator({
    Share: { screen: Share},
    About: { screen: About},
    Service: {screen: Service}
});

I can correctly handle how to jump from App to App, but in the TabNavigator in screen Myself I want to jump to the StackNavigator Pages, if I add it directly to Main, it doesn't work.

So how can I achieve this?

score 0 · Answer 1 · answered Jul 13 '17 at 17:49

What you need to do is something similar to how you put a TabNavigator inside of a StackNavigator with Main. You can also put a StackNavigator inside of a TabNavigator. In this case, you want to use your Pages navigator as the MySelf route on your Main TabNavigator, and instead of having a page MySelf on the TabNavigator route, put MySelf as the initial route on the Pages StackNavigator.

It will look like something like this:

...
const Pages = StackNavigator({
  Index: { screen: MySelf },
  Share: { screen: Share },
  About: { screen: About },
  Service: { screen: Service },
}); 

const Main = TabNavigator({
  Home: { screen: Home },
  Dash: { screen: Dash},
  Myself: { screen: Pages},
});

How to add StackNavigator for TabNavigator?

1 Answers1