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

Answer 2

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

上面的方法可以达到预期的效果，但是可能会出现一些问题，比如执行Navigation to Screen时，屏幕顶部会弹出2个Header。

对上述代码的改进：

const rootNav = StackNavigator({
         app: {screen: App},
         First: { screen: ProfileScreen },
         Second: { screen: SecondActivity },

});

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

React Native - Combine 2 Navigation Type in single apps

android

react-native

react-navigation