android - React Native - 在单个应用程序中组合 2 种导航类型

Question

我尝试在我的应用程序中实现两种类型的导航:选项卡导航和堆栈导航。

我的愿望输出:

但到目前为止，我的代码只能实现其中之一。

const App = TabNavigator({
  HomeScreen: { screen: HomeScreen },
  ProfileScreen: { screen: ProfileScreen },
}, {
  tabBarOptions: {
    activeTintColor: '#7567B1',
    labelStyle: {
      fontSize: 16,
      fontWeight: '600',

    }
  }
});

const Go = StackNavigator({
  First: { screen: ProfileScreen },
  Second: { screen: SecondActivity } },

});

export default rootNav;

我应该对代码进行哪些更改才能在我的应用程序中实现这 2 个导航？

谢谢。

Answer 1

您需要一个根 StackNavigator，它有一条通往您的 TabNavigator 的路线，一条通往其他 StackNavigator 的路线。然后您可以从 TabNavigator 导航到其他 StackNavigator。

const rootNav = StackNavigator({
     app: {screen: App},
     go: {screen: Go},
});