Question

您好我正在尝试创建：

所有屏幕的顶部栏
仅4个屏幕的底部栏

所以我有2个屏幕->主屏幕和连接屏幕（没有任何顶部或底部栏）

然后我有6个屏幕A B C D E F

我希望每个上方都有一个顶部栏，而A B C F上则需要一个底部

const TabRouter = createBottomTabNavigator(
{
  HomeAfterLoginScreen: { screen: A },
  ShowListAlertScreen: { screen: B },
  ShowListProfessionScreen: { screen: C },
  MyAccountScreen: { screen: F }
},
{
  tabBarPosition: "bottom",
  tabBarOptions: {
    style: { backgroundColor: "#50bcb8" },
    showIcon: true,
    showLabel: true,
    gesturesEnabled: true,
    indicatorStyle: { borderBottomWidth: 3, borderBottomColor: Style.color },
    inactiveTintColor: "#fff",
    activeTintColor: "#fff",
    tabStyle: { justifyContent: "center", alignItems: "center" }
  }
});

const Router = createStackNavigator({
  // If I add A B C F here i loose my bottombar
  D : {
    screen : D, 
    navigationOptions: {(nav option ..)}
  },
  E : {
    screen : E, 
    navigationOptions: {(nav option ..)}
  },
  Home: {
    screen: HomeScreen,
    navigationOptions: {(nav option ..)}
  },
  App: {
    screen: TabRouter,
    navigationOptions: {
      visible: false,
      header: null
    }
  },
  ConnexionScreen: {
    screen: ConnexionScreen,
    navigationOptions: {(nav option ..)}
  },
});

export default Router;

有一个我的router.js示例

在这种配置下，我有底部栏，但没有顶部栏。有什么建议吗？

这是我的屏幕A，我要在其上面有一个顶栏。但是，如果在creatstack导航器上添加此屏幕，我会松开我的底部栏。

Answer 1

您期望的图像会有所帮助。在某些屏幕上隐藏选项卡的一种奇怪的导航模式，这意味着您不希望用户导航到隐藏的选项卡。但是，如果您仍在顶部选项卡导航器中使用相同的屏幕，那么对于相同的屏幕使用底部和顶部选项卡栏，我将毫无用处。

您可以有一个只有3个标签的标签，其中一个是带有4个标签的嵌套标签导航器，即模式。

好吧，你不是标题吗？，我以为您想要顶部标签导航，那么这很容易，而不是将屏幕传递给HomeAfterLoginScreen，而是使用嵌套的stacknavigator，因为tabnavigator不能访问标头，但是如果您在其中嵌套stacknavigator，则可以有标头。然后只需删除标头为header：null

的标头

Answer 2

尝试删除标题：

中的空行

App: {
screen: TabRouter,
navigationOptions: {
  visible: false,
  header: null
}

Answer 3

const STANDARD_NAVIGATION_OPTION = {
  backtitle: null,
  headerStyle: { backgroundColor: 'green' },
  headerTintColor: 'white'
};

const App = createBottomTabNavigator({
  tabA: {
    screen: createStackNavigator(
              {
                tabAFirstScreen: {
                  screen: tabAScreen,
                  navigationOptions: {
                    ...STANDARD_NAVIGATION_OPTION,
                    title: 'Header Title A'
                  }
                }
              },
              { headerMode: 'screen' })
  },
  tabB: {
    screen: createStackNavigator(
              {
                tabBFirstScreen: {
                  screen: tabBScreen,
                  navigationOptions: {
                    ...STANDARD_NAVIGATION_OPTION,
                    title: 'Header Title B'
                  }
                }
              },
              { headerMode: 'screen' })
  }
}, {
  tabBarPosition: 'bottom',
    tabBarOptions: {
    labelStyle: { fontSize: 12 },
      activeTintColor: 'yellow',
      pressColor: 'orange'
     }
})

const MainNavigator = createAppContainer(App);

export default MainNavigator;

这个想法是，首先您有一个bottomTabNavigator作为根用户，然后在底部选项卡中定义每个选项卡：tabA，tabB，依此类推。

在每个标签中，定义自己的createStackNavigator，以便每个标签都具有header的外观，这也使您也可以将屏幕堆叠在标签中。

如何创建多个stackNavigator？

3 个答案: