如何为 TabNavigator 添加 StackNavigator？答案

【问题标题】：How to add StackNavigator for TabNavigator?如何为 TabNavigator 添加 StackNavigator？
【发布时间】：2017-12-18 14:27:36
【问题描述】：

我有一个需要 StackNavigator 和 TabNavigator 的应用程序。逻辑是：

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

我可以正确处理如何从App跳转到App，但是在屏幕Myself的TabNavigator中我想跳转到StackNavigatorPages，如果我直接添加到Main，它不起作用。

那么我该如何实现呢？

【问题讨论】：

标签： reactjs react-native react-native-android react-native-ios react-navigation

【解决方案1】：

您需要做的事情类似于将 TabNavigator 放入带有 Main 的 StackNavigator 中。您还可以将 StackNavigator 放在 TabNavigator 内。在这种情况下，您希望将您的Pages 导航器用作Main TabNavigator 上的MySelf 路由，而不是在TabNavigator 路由上使用MySelf 页面，而是将MySelf 作为初始路由放在Pages StackNavigator。

它看起来像这样：

...
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},
});

【讨论】：